vue2路由
一、介绍
本文是以前学习 vue2时整理的，对于目前的 vue3有些过时。
专注后端，前端只作为使用学习。
二、路由
-
作用：用于维护URL跳转和页面之间的关系
-
使用步骤：
-
引入vue-router.js文件（必须先引入vue.js）
-
配置路由规则，url和对应的页面的配置const routes = [{ path: "/", compontent: "组件" }]
-
创建路由实例对象const router = new VueRouter({routes})
-
将路由实例对象注册到vue实例中 new Vue({ router })
-
在页面中使用路由占位符，来为路由的组件占位<router-view />
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<a href="#/">主页</a> <a href="#/details">详情</a> <a href="#/info">个人中心</a>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma },
{ path: "/details", component: comb },
{ path: "/info", component: comc },
]
});
new Vue({
el: "#app",
data: {
title: "路由"
},
router: router
})
</script>
|
1）router-link标签，及当前路由高亮
-
<router-link>
- tag：指定生成的元素标签，默认为a标签
- to：跳转的路由路径
- exact：路由严格匹配模式
- replace：点击路由跳转后，不会留下history记录
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <style>
span{
margin-left: 10px;
font-size: 16px;
}
.router-link-active{
color: red;
font-size: 22px;
}
</style>
<div id="app">
<h1>{{ title }}</h1>
<hr>
<router-link tag="span" to="/" exact>主页</router-link>
<router-link tag="span" to="/details">详情</router-link>
<router-link tag="span" to="/info">个人中心</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
var router = new VueRouter({
linkActiveClass: "router-link-active",
routes: [
{ path: "/", component: coma },
{ path: "/details", component: comb },
{ path: "/info", component: comc },
]
});
new Vue({
el: "#app",
data: {
title: "路由"
},
router: router
})
</script>
|
2）404路由
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
40
41
42
43
44
45
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<a href="#/">主页</a> <a href="#/details">详情</a> <a href="#/info">个人中心</a>
<hr>
<router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
var notFound = {
template: `
<h1>404，您的页面未找到哦</h1>
`
}
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma },
{ path: "*", component: notFound }
]
});
new Vue({
el: "#app",
data: {
title: "路由"
},
router: router
})
</script>
|
3）命名路由
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<router-link :to="{ name: 'index' }" exact>主页</router-link>
<router-link :to="{ name: 'details' }">详情</router-link>
<router-link :to="{ name: 'info' }">个人中心</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma, name: "index" },
{ path: "/details", component: comb, name: "details" },
{ path: "/info", component: comc, name: "info" },
]
});
new Vue({
el: "#app",
data: {
title: "路由"
},
router: router
})
</script>
|
4）动态路由
4.1、基本使用
-
作用：获取url上绑定的占位符
-
路径示例：/user/get/101
-
实现步骤：
- 定义占位：
{ path: "/info/:id", component: comc }
- 获取参数对象：
this.$route.params
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<router-link to="/">主页</router-link>
<router-link to="/details">详情</router-link>
<router-link to="/info">个人中心</router-link>
<router-link to="/info/300">300的个人中心</router-link>
<router-link to="/info/500">500的个人中心</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
<h2>id:{{ $route.params.id }}</h2>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
created(){
console.log(this.$route.params);
}
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma, },
{ path: "/details", component: comb, },
{ path: "/info/:id", component: comc, },
]
});
new Vue({
el: "#app",
data: {
title: "动态路由"
},
router: router
})
</script>
|
4.2、获取参数及router-link标签传递参数
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<router-link to="/">主页</router-link>
<router-link to="/details">详情</router-link>
<router-link to="/info">个人中心</router-link>
<ul>
<router-link tag="li" :to="{ path: '/info', query: { name: 'banmoon', sex: 1 } }">个人中心查询1</router-link>
<router-link tag="li" :to="{ path: '/info', query: { name: 'user', sex: 2 } }">个人中心查询2</router-link>
<router-link tag="li" :to="{ name: 'infoPage', query: { name: 'san', sex: 1 } }">命名查询</router-link>
</ul>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
// 使用 $route.params 可以找到参数
template: `
<div>
<h1>{{ h1 }}</h1>
<h2>查询条件</h2>
<ul>
<li v-for="(value, key) in $route.query">
{{ key }} : {{ value }}
</li>
</ul>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
created(){
console.log(this.$route.query);
}
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma, },
{ path: "/details", component: comb, },
{ name: "infoPage", path: "/info", component: comc, },
]
});
new Vue({
el: "#app",
data: {
title: "动态路由"
},
router: router
})
</script>
|
5）编程式路由
-
js方法实现路由跳转
- $router.push()：导航跳转
- $router.replace()：同上，但它不会向 history 添加新记录，也就是无痕浏览
- $router.go(n)：前进n级路由，n为负数时，回退到前几步
5.1、router.push()
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<button @click="skip01">主页</button>
<button @click="skip02">详情</button>
<button @click="skip03">个人中心</button>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
<h2>查询条件</h2>
<ul>
<li v-for="(value, key) in $route.query">
{{ key }} : {{ value }}
</li>
</ul>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma },
{ name: "detailsPage", path: "/details", component: comb },
{ path: "/info", component: comc },
]
});
new Vue({
el: "#app",
data: {
title: "编程式导航"
},
router: router,
methods: {
skip01(){
this.$router.push({ path: "/" });
},
skip02(){
this.$router.push({ name: 'detailsPage' });
},
skip03(){
this.$router.push({ path: '/info', query: { name: 'banmoon', sex: 1 } });
}
}
})
</script>
|
5.2、router.replace()
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<button @click="skip01">主页</button>
<button @click="skip02">详情</button>
<button @click="skip03">个人中心</button>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
<h2>查询条件</h2>
<ul>
<li v-for="(value, key) in $route.query">
{{ key }} : {{ value }}
</li>
</ul>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma },
{ name: "detailsPage", path: "/details", component: comb },
{ path: "/info", component: comc },
]
});
new Vue({
el: "#app",
data: {
title: "编程式导航"
},
router: router,
methods: {
skip01(){
this.$router.replace({ path: "/" });
},
skip02(){
this.$router.replace({ name: 'detailsPage' });
},
skip03(){
this.$router.replace({ path: '/info', query: { name: 'banmoon', sex: 1 } });
}
}
})
</script>
|
5.3、$router.go()
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <div id="app">
<h1>{{ title }}</h1>
<button @click="goback(-1)">返回上一页</button>
<button @click="goback(1)">进入下一页</button>
<hr>
<router-link to="/">主页</router-link>
<router-link to="/details">详情</router-link>
<router-link to="/info">个人中心</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma },
{ path: "/details", component: comb },
{ path: "/info", component: comc },
]
});
new Vue({
el: "#app",
data: {
title: "编程式导航"
},
router: router,
methods: {
goback(n){
this.$router.go(n);
}
}
})
</script>
|
6）路由设置title
-
作用：不同的路由拥有不同的浏览器标题
-
步骤：
- 定义路由，添加自定义属性title：
{ path: '/', component: coma, title: "标题" }
- 在生命周期created()中获取路由上的自定义属性，使用document修改title
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <div id="app">
<h1>{{ title }}</h1>
<hr>
<router-link to="/">主页</router-link>
<router-link to="/details">详情</router-link>
<router-link to="/info">个人中心</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
created(){
console.log(this.$route.meta);
document.querySelector("title").innerHTML = this.$route.meta.title;
}
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "详情",
}
},
created(){
document.querySelector("title").innerHTML = this.$route.meta.title;
}
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
created(){
document.querySelector("title").innerHTML = this.$route.meta.title;
}
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma, meta: { title: "主页" } },
{ path: "/details", component: comb, meta: { title: "详情" } },
{ path: "/info", component: comc, meta: { title: "个人信息" } },
]
});
new Vue({
el: "#app",
data: {
title: "路由设置title"
},
router: router
})
</script>
|
7）嵌套路由
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="app" class="container">
<h1>{{ title }}</h1>
<hr>
<router-link tag="button" to="/" class="btn btn-success">主页</router-link>
<router-link tag="button" to="/details" class="btn btn-primary">详情</router-link>
<router-link tag="button" to="/info" class="btn btn-default">个人中心</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const coma = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "主页",
}
},
};
const comb = {
template: `
<div>
<h1>{{ h1 }}</h1>
<router-link class="btn btn-primary" to="/details/flower">花语</router-link>
<router-link class="btn btn-info" to="/details/starry">星空</router-link>
<hr>
<router-view></router-view>
</div>
`,
data() {
return{
h1: "详情",
}
},
};
const comc = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "个人中心",
}
},
};
const comd = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "花语详情",
}
},
};
const come = {
template: `
<div>
<h1>{{ h1 }}</h1>
</div>
`,
data() {
return{
h1: "星空详情",
}
},
};
var router = new VueRouter({
routes: [
{ path: "/", component: coma },
{ name: "detailsPage", path: "/details", component: comb,
children: [
{ path: "/details/flower", component: comd },
{ path: "/details/starry", component: come }
]
},
{ path: "/info", component: comc },
]
});
new Vue({
el: "#app",
data: {
title: "编程式导航"
},
router: router,
})
</script>
|
8）router==和==route的区别
-
$router：是路由对象的实例，相当于new VueRouter()这个对象
-
$route：当前路由的实例对象，每一个路由都是一个独立的对象，此对象相当于{ path: "/", compontent: coma }
- $route.path：获取路由配置的url路径
- $route.params：含路有种的动态片段和全匹配片段的键值对，不会拼接到路由的url的
?后面
- $route.query：对象，包含路由中查询参数的键值对。会拼接到路由url的
?后面
- $route.name：当前路由的名字，如果没有使用具体路径，则名字为空
- $route.router：当前路由规则所属的路由器
- $route.matchd：数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对象
- $route.[costom]：路由规则自定义属性
三、最后
我是半月，你我一同共勉！
