命名路由

简化路由的跳转

使用方法

1.给路由命名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import VueRouter from 'vue-router'
import About from "@/pages/About.vue";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import Message from "@/pages/Message.vue";
import Detail from "@/pages/Detail.vue";

export default new VueRouter({
    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.简化跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 简化前，需要写完整的路径 -->
<router-link to="demo/test/welcome">跳转</router-link>
 
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
 
<!-- 简化写法配合传递参数 -->
<router-link :to="{
        name:'hello'，
        query:{
            id:666,
            title:'你好'        
        }
    }"
>跳转</router-link>