Vue-58、Vue技术命名路由

命名路由

1、作用：可以简化路由的跳转

2、如何使用

1、给路由命名：

routes:[
        {
            name:'guanyu',//给路由命名
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {

                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',//给路由命名
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        },
    ]

2、简化跳转

<!--                简化前，需要写完整路径-->
 <router-link :to="{path:'/home/message/detail',query:{id:p.id,title:p.title}}">{{p.title}}</router-link>

<!--                简化后，直接通过名字跳转-->
<router-link :to="{name:'xiangqing',query:{id:p.id,title:p.title}}">{{p.title}}</router-link>