Vue中管理路由-vue-router路由配置

àì夳堔傛蜴生んèń 2022-02-24 09:24 983阅读 0赞

在新建Vue Router时，Router的构建选项有routes、mode、base、linkActiveClass、linkExactActiveClass等等，这里只介绍mode和routes，我们常说的路由配置一般指配置routes。  
详细的请查询[官方文档][Link 1]

# mode：路由模式 #

Vue-Router的前端路由有两个模式"hash"和"history"，history模式要依赖服务器配置，请参考[SPA中前端路由实现原理与Vue-Router前端路由模式][SPA_Vue-Router]

# routes 类型: Array<RouteConfig> #

routes用来创建vue-router路由实例的配置项，是一个数组，用来设置一组url与组件的对应关系，数组中的成员称为一条路由记录。  
其中一条路由的配置项

{ 
      path: string,  //1、路由匹配的路径
      component?: Component, //2、路由映射的组件
      name?: string, // 3、命名路由
      components?: {  [name: string]: Component }, // 4、配置命名视图组件
      redirect?: string | Location | Function,  //5、路由重定向
      props?: boolean | Object | Function,  //6、路由组件传递参数
      alias?: string | Array<string>,  //7、路由别名
      children?: Array<RouteConfig>, // 8、嵌套子路由
      beforeEnter?: (to: Route, from: Route, next: Function) => void,  //9、 配置路由独享的守卫
      meta?: any,  // 10、自定义标签属性，比如：是否需要登录
      base: string, // 11、配置单页应用的基路径
      // 2.6.0+
      caseSensitive?: boolean, //12、 匹配规则是否大小写敏感？(默认值：false)
      pathToRegexpOptions?: Object //13、 编译正则的选项
    }

下面建立4个组件来介绍这些配置项,分别是产品根组件、产品列表、产品详情和404页面

### 1、path 设置路由匹配的路径 ###

string类型，必选，用来匹配浏览器URL，hash模式时path是window.location.hash中\#后面的部分，history模式时path是window.location.pathname的值。

routes: [
      {  path:'/login',component: Login},
      {  name:'detail',path: '/products/detail/:id', component:ProductDetail},  //path中携带`动态路径参数`
      {  path: '/products/*',component:ProductList},  //会匹配以 /products/ 开头的任意路径
      {  path: '*',component:Page404  //会匹配所有路径,要放到最后
    ]

*  path属性可以使用绝对路径（以/开头）和相对路径（不以/开头），相对路径匹配时就会相对于父组件的路径。
 *  path中可以携带`动态路径参数`，以：开头，当匹配到一个路由时，参数值会被设置到`路由对象`的属性`params`中，以：开头的动态路径参数，为称`动态片段`,可以设置多个动态片段。  
    如:`/product/:id`中:id就是`动态片段`,它会匹配/product/1、 /product/abc之类的路径，当路径匹配一个含有动态片段的路由规则时，动态片段的信息可以从 $route.params 中获得。
    
    /product/1匹配到的路由：  
    ![在这里插入图片描述][2020011310470692.png]
 *  path中可以使用通配符（\*），使用匹配通配符是设置`全匹配片段`的语法。  
    如:`/products/*`就会匹配到任何以/product/为开头的路径，假设路径是`/products/1/1/1`,将会匹配成功，params对象中的pathMatch属性会被赋值为`1/1/1`（）我的Vue Router版本是3.1.3，不同的版本写法有所区别）。
    
    /products/1/1/1匹配到的路由：  
    ![在这里插入图片描述][20200113104507158.png]

### 2、component 路由映射的组件 ###

### 3、name 配置路由的名称 ###

如果要给导航传递动态参数params，那么就需要为这条路由命名，就是path和params一起使用时params将被忽略。  
如上例中，给含有动态参数的id的路由，配置了路由名称，使用router.push(),给导航传递参数params时，必须设置name属性  
![在这里插入图片描述][20200113110743262.png]

### 4、components 配置命名视图组件 ###

在前面的例子中视图中只有一个router-link组件，来渲染路由映射过来的组件，实际上在界面中可以拥有多个单独命名的视图（router-link），而不是只有一个单独的出口。  
如果页面中展示多个视图，而不是嵌套展示，命名视图就派上用场了，如下图，左面的视图用来匹配产品列表，右边的视图用来匹配产品的详情

如果 router-view 没有设置name，那么默认为 default  
![在这里插入图片描述][20200113161418812.gif]  
路由这样配置:

routes: [
      { 
         path: '/',
         components: { 
           list:ProductList, 
           detail:ProductDetail
         },
         children: [
           {  path: 'list', components: { list:ProductList,detail:ProductDetail}},
           {  name: 'detail', path: '/detail/:id', components: { list:ProductList, detail:ProductDetail}},
         ]
       }
     ]

### 5、redirect 重定向 ###

重定向是将一个path定向到另一个path，地址栏中显示目标路由的那个路径，redirect的值可以是一个path值，也可以是一个对象，甚至是一个函数。

下面的代码都是将路径为"/“时，定向到”/products"

{  path: '/', redirect: '/products'},
     {  path: '/', redirect: {  name: 'products' }},
     {  path: '/', redirect: to=>'/products'}

### 6、props 路由组件传递参数 ###

在vue实例中引入Router实例后，可以在Vue中使用`this.$route`访问当前路由对象，如ProductDetail组件的模板中可以通过`{ {$route.params.id}}`获得当前路由对象路径参数id,在组件中使用 $route 会使之与其对应路由形成高度耦合。

const ProductDetail={ 
      template:`<div><h2>id为{ {$route.params.id}}的产品详情</h2></div>`
    };
    const router = new VueRouter({ 
      routes: [
         {  name:'detail',path: '/products/detail/:id', component:ProductDetail}
      ]
    })

使用 props 将组件和路由解耦：

const ProductDetail={ 
      template:`<div><h2>id为{ {id}}的产品详情</h2></div>`,
      props:['id']
    };
    const router = new VueRouter({ 
      routes: [
         {  name:'detail',path: '/products/detail/:id', component:ProductDetail,props:true}
      ]
    })

### 7、alias 配置路由别名 ###

别名和重定向看起来相似，

*  重定向：当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
 *  别名：如果/a 的别名是 /b，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

{  path: '/a', redirect: '/b'},
     {  path: '/a', component: A, alias: '/b' }

### 8、children 配置子路由 ###

children属性值是一个数组，数组中的项和前面讲的路由对象几乎没有区别，但子路由中的path不需要加’/’，因为以“/”开头的嵌套路径会被当作根路径。

本例中router配置这样改写

const router = new VueRouter({ 
      routes: [
        { path: '/', redirect: '/products'},
        { 
          path: '/products', 
          component: Products, 
          children: [
            {  path: '',redirect: 'list'},
            {  path: 'list', component: ProductList},
            {  name: 'detail', path: '/products/detail/:id', component: ProductDetail},
          ]
        },
        { path: '*', component: Page404}
      ],
      mode: 'history'
    });

#### 9、beforeEnter 配置路由独享的守卫 ####

在路由记录上上直接定义 beforeEnter 守卫，是这条路由路由独享的路由守卫，参数是to,from,next

*  to: Route: 即将要进入的目标 路由对象
 *  from: Route: 当前导航正要离开的路由
 *  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。如果不调用next，那么页面会卡住,路由不再走了

{  
       name: 'detail', 
       path: '/products/detail/:id', 
       component: ProductDetail,
       beforeEnter:(to,from,next)=>{ 
         console.log('to',to);
         console.log('from',from);
         next();
       }
    }

关于路由守卫详见[Vue中管理路由-vue-router路由守卫][Vue_-vue-router]

### 10、meta 配置路由元信息 ###

meta是每个路由的标识信息，是路由对象固有的一个信息,无论在路由中是否定义meta，在组件中都可以通过this.$route.meta访问到，如果没有定义，返回\{\}  
根据路由的meta属性可以实现验证用户是否登录、设置标题、图标、面包屑导航等等  
下面的代码，配置这条路由验证进入的时候验证是否登录，并设置网页的title

{ 
      name: 'detail',
      path: '/products/detail/:id',
      component: ProductDetail,
      meta: { 
        title:'产品详情',
        requiresAuth: true
      },
      beforeEnter:(to,from,next)=>{ 
        document.title = to.meta.title;
        let token = true;
        if (token) { 
          next();
        } else { 
          next("/login")
        }
        next();
      }
    }

### 11、base 配置单页应用的基路径 ###

new Router({ 
      //...
      base: '/view',  // 配置单页应用的基路径
      //...
    });

如果这样配置，访问 http://localhost:XXX/view/ 和 http://localhost:XXX/效果是一样的。

### 12、caseSensitive 匹配规则是否大小写敏感 ###

默认是false,不敏感。  
下面的配置下，`/Login`匹配不到登录组件

{ path:'/login',component: Login,caseSensitive:true},

### 13、pathToRegexpOptions 编译正则的选项 ###

[Link 1]: https://router.vuejs.org/zh/api/#router-%E6%9E%84%E5%BB%BA%E9%80%89%E9%A1%B9
[SPA_Vue-Router]: https://blog.csdn.net/dreamingbaobei3/article/details/88971960
[2020011310470692.png]: /images/20220224/53792de44a694e36b152d8df7cc3943c.png
[20200113104507158.png]: /images/20220224/1698254ae34e433691b5cb99b8aeab30.png
[20200113110743262.png]: /images/20220224/e0991704b424426fb3ee9621b580fd8e.png
[20200113161418812.gif]: /images/20220224/e8a7a2d2c726483cb0bb34343c9cb865.png
[Vue_-vue-router]: https://blog.csdn.net/dreamingbaobei3/article/details/100926046