命名路由

1.作用：简化路由的跳转
2.如何使用

给路由命名

export default new VueRouter({
  routes: [
    {
      name:'zhuye',
      path: '/home',
      component: Home,
      children: [
        {
          name:'xiaoxi',
          path: 'message',
          component: Messages,
          children: [
            {
              name:'xiangqing',
              path: 'detail',
              component: Detail
            }
          ]
        },
      ]
    }
  ]
})

简化跳转

1.简化前，需要写完整的路径

<router-link  to="/home/message/detail”>跳转</router-link>

2.简化后，直接通过名字跳转

<router-link  :to="{name:"xiangqing"}l”>跳转</router-link>

3.简化后，配合传递参数

 <router-link
          :to="{
            name:'xiangqing',
            query: {
              id: msg.id,
              title: msg.title,
            },
          }"
          >跳转</router-link>