> 有这样一个场景用户输入了网站未定义的路由地址 默认Vue-router会跳转到首页，显然这样是不科学的，我们可以定义一个404路由提示用户你输入的地址不存在。
>
> src -> router -> index.js
>
> import Vue from "vue";
> import VueRouter from "vue-router";
> import Home from "../views/Home.vue";
> import About from "../views/About.vue";
> import User from "../views/User";
> Vue.use(VueRouter);
>
> const routes = [
> {
> path: "/",
> name: "Home",
> component: Home
> },
> {
> path: "/about",
> name: "About",
> component: About
> },
> {
> path: "/user/:id",
> name: "User",
> component: User
> },
> {
> path: "*", // *代表通配 也就是上面的路由没有找到会匹配到这里 自然这里就引申出一个优先级的问题
> name: "404",
> component: () => import("../views/404") // 异步组件加载方式 效率更高
> }
> ];
>
> const router = new VueRouter({
> mode: "history",
> base: process.env.BASE_URL,
> routes
> });
>
> export default router;
>
>
>
> ！注意404路由一定要放到路由配置最下方，因为这里存在一个匹配优先级的问题 他会从上往下找 如果404路由放到首位或者中间某一个位置就会造成下方的路由失效
>
> src -> views -> User.vue
>
>
> ```javascript
>
> ````
> ### 404
>
> ````
> *（通配符）在Vue-router中还有一些其他的作用例如在一个后台管理系统
>
> src -> router -> index.js
>
> ```javascript
> import Vue from "vue";
> import VueRouter from "vue-router";
>
> import User from "../views/User";
> import UserAdmin from "../views/UserAdmin";
> Vue.use(VueRouter);
>
> const routes = [
> {
> path: "/user/:id",
> name: "User",
> component: User
> },
> {
> path: "/user-*",
> name: "UserAdmin",
> component: UserAdmin
> },
> ];
>
> const router = new VueRouter({
> mode: "history",
> base: process.env.BASE_URL,
> routes
> });
>
> export default router;
>
>
> 如果说是一个这样的路由http://localhost:8080/user/1就是之前定义的用户动态路由如果说是一个这样的路由http://localhost:8080/user-admin他就会切换到一个admin路由下，可以使用$route.params.pathMatch获取到/user-*通配的内容
>
> src -> views -> UserAdmin.vue
>
>
> ```javascript
>
> ````
> #### Admin页面
> ### {{ $route.params.pathMatch }}
>
> ```
### 路由参数查询
> 有这样一种路由是长成这种样子`http://localhost:8080/page?id=1&title=foo` 这种形式的路由这个例子有两个参数 src -> router -> index.js ```
> import Vue from "vue";
> import VueRouter from "vue-router";
> import Page from "../views/Page";
> Vue.use(VueRouter);
>
> const routes = [
> {
> path: "/page",
> name: "Page",
> component: Page
> },
> ];
>
> const router = new VueRouter({
> mode: "history",
> base: process.env.BASE_URL,
> routes
> });
>
> export default router;
> ```
>
> src -> App.vue
>
> ```html
> > Page |
>
>
>
> ```
>
> query为参数查询 当然这里的数据是写死的 因为我们使用的是命名路由未来可以替换成动态数据，然后可以在组件中拿到对应的参数进行一些操作。
>
> ```javascript
> ### Page页面
>
> ```
### 路由重定向&别名
> src -> router -> index.js
>
> ```
> const routes = [
> {
> path: "/",
> redirect:{name:'Home'} // 默认的 / 就会跳转到Home路由
> },
> {
> path: "/home",
> name: "Home",
> component: Home
> },
> ];
> ```
>
> 别名就不多说了 `alias: '/aaa'`一个属性 一个别名
### 路由组件传值
> 在之前我们是使用`$route`获取地址栏上的值进行传值，但是随着项目的复杂度增加地址栏上的参数会越来越多`$route`获取值的方式会显得复杂，也会跟路由形成高度的耦合，当前组件只能在特定的URL使用，限制了组件灵活。
>
> 解决这个问题可以在定义路由的时候使用`porps`属性
>
> src -> router -> index.js
>
> ```
> {
> path: "/user/:id",
> name: "User",
> component: User,
> props:true //使用props传值
> },
> ```
>
> src -> views -> User.vue
>
> ```javascript
我是用户页面{{ id }}
> ````
> 在路由中定义props还有其他的用法例如定义一个函数
>
> src -> router -> index.js
>
> ```javascript
> {
> path: "/user/:id",
> name: "User",
> component: User,
> props: route => ({
> id: route.params.id,
> title: route.query.title
> })
> },
>
>
> src -> views -> User.vue
>
>
> ```javascript
>
> ````
我是用户页面{{ id }}-{{ title }}
> ``` 之后访问`http://localhost:8080/user/1?title=lalalala`就可以拿到对应的title参数值了
### 编程式导航
> 我们可以通过`this.$route`获取路由组件实例对象里面有一些方法例如`push go back`等方法进行动态的路由跳转，我们称之为编程形导航。 类似于`Home` 叫做声明形导航 例如我在User组件下添加了一个返回首页的按钮我们可以这样做 src -> views -> User.vue ```javascript
> 回到首页 >
> ``` 也可以使用命名的方式例如`this.$router.push("name");`也可以是个对象`this.$router.push({path:'/'});` 也可以是一个命名路由 也可以进行前进或者后退，使用`this.$route.to()`进行控制。参数1就是前进，参数0就是刷新，参数-1就是后退
### 嵌套路由
src -> router -> index.js > ```
> {
> path: "/user/:id",
> name: "User",
> component: User,
> props: route => ({
> id: route.params.id,
> title: route.query.title
> }),
> children: [
> {
> path: "posts",
> component: () => import("../views/Posts")
> }
> ]
> },
> ```
>
> 然后就是在一个位置定义跳转`children`最后在user中定义路由出口 ``。
### 命名视图
> 一般情况下，我们在路由配置中，一个路由路径只能对应一个组件，若想对应多个组件，必须得作为子组件存在，然后再一个公用的视图内显示，这是一个路由对应多个组件，这些组件对应一个视图（就是上面嵌套路由的玩法）
>
> 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 `sidebar` (侧导航) 和 `main` (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
>
> src -> router -> index.js
>
> ```
> const routes = [
> {
> path: "/home",
> name: "Home",
> component:{
> default:Home, //默认的名字
> Sidebar:() => import('../views/Sidebar'),
> Main:() => import('../views/main'),
> }
> },
>
> ];
> ```
>
> src -> views -> Home.vue
>
> ```
>
>
>
>
>
> ```
### 全局守卫
> 可以使用`router.beforEach`注册一个全局前置守卫
>
> ```
> beforeRouteUpdate(to, from, next) {
> next();
> },
> ```
>
> 有个需求，用户在浏览网站时，会访问很多组件，用户跳转到`/notes`，发现用户没有登录，此时应该让用户登陆后查看，应该让用户跳转到登录页面，登陆完成后看到我的笔记内容，这个时候全局守卫起到了关键作用。