Vue学习笔记-命名路由

作用

简化路由的跳转,适合在路径过长的时候使用（例如：path:'/a/b/c/d/e/f/...'）
如何理解：相当于给路径起别名

使用方式

1. 给路由命名

//创建一个路由器
const router = new VueRouter({
    routes:[
        ......
        {
            path:'/home',
            component:HomeVue,
            children:[
                {
                    path:'news',/*二级路由不用写斜杠*/
                    component:NewsVue
                },
                {
                    path:'message',
                    component:MessageVue,
                    children:[
                        {
                            name:'detailName',
                            path:'detail',
                            component:DetailVue
                        },
                    ]
                }
            ],
        }
    ],
})

2. 简化跳转

<!--简化前-->
<router-link to="/home/message/detail">详情页</router-link>
<!--简化后-->
<router-link :to="{name:'detailName'}">详情页</router-link>
<!--简化配合传递参数-->
<router-link :to="{
  name:'detailName',
  query:{
    id:666,
    title:'hello'
  }
}">详情页</router-link>

切记

使用命名路由时,要使用 v-bind:to来解析js对象，对象中声明name属性