1.路由的概念
路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。
路由分为前端路由和后端路由
- 后端路由是由服务器端进行实现，并完成资源的分发，根据不同的URL返回不同的内容。
- 前端路由是依靠hash值(锚链接)的变化进行实现 ，根据不同的用户事件显示不同的页面，即用户事件和事件处理函数的对应关系。
2.前端路由的初体验
前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）
核心实现依靠一个事件，即监听hash值变化的事件
1
2
3
4
5
|
window.onhashchange = function(){
location.hash
}
|
前端路由实现tab栏切换：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<div id="app">
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<component :is="comName"></component>
</div>
<script>
const zhuye = {
template: '<h1>主页信息</h1>'
}
const keji = {
template: '<h1>科技信息</h1>'
}
const caijing = {
template: '<h1>财经信息</h1>'
}
const yule = {
template: '<h1>娱乐信息</h1>'
}
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
components: {
zhuye,
keji,
caijing,
yule
}
})
window.onhashchange = function() {
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
</body>
</html>
|
点击每个超链接之后，会进行相应的内容切换，如下：
3.Vue Router简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router的使用步骤
- 导入js文件。Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router。
1
2
| <script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
|
- 添加路由链接:
<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，
to属性的值会被渲染为#开头的hash地址
1
2
| <router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
|
- 添加路由填充位（路由占位符），将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
<router-view></router-view> - 定义路由组件
1
2
| var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }
|
- 配置路由规则并创建路由实例
1
2
3
4
5
6
7
8
9
| var myRouter = new VueRouter({
routes:[
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
|
- 将路由挂载到Vue实例中
1
2
3
4
5
6
| new Vue({
el:"#app",
router:myRouter
})
|
路由重定向：在访问A的时候，强制用户跳转到地址C。
1
2
3
4
5
6
7
8
9
10
|
var myRouter = new VueRouter({
routes: [
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
|
4.嵌套路由
当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
嵌套路由最关键的代码在于理解子级路由的概念：比如我们有一个/login的路由，那么/login下面还可以添加子级路由，如:/login/account、/login/phone
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
| var User = { template: "<div>This is User</div>" }
var Login = { template: `<div>
<h1>This is Login</h1>
<hr>
<!-- 子路由标签 -->
<router-link to="/login/account">账号密码登录</router-link>
<router-link to="/login/phone">扫码登录</router-link>
<!-- 子路由组件将会在router-view中显示 -->
<router-view></router-view>
</div>` }
var account = { template:"<div>账号：<input><br>密码：<input></div>"};
var phone = { template:"<h1>扫我二维码</h1>"};
var myRouter = new VueRouter({
routes: [
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{
path: "/login",
component: Login,
children:[
{ path: "/login/account", component: account },
{ path: "/login/phone", component: phone },
]
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router:myRouter
});
|
页面效果大致如下：
5.动态路由匹配
1
2
3
4
5
6
7
8
9
| var myRouter = new VueRouter({
routes: [
{ path: "/user/:id", component: User }
]
}
var User = { template:"<div>用户：{{$route.params.id}}</div>"}
|
使用$route.params.id来获取路径传参的数据不够灵活，可以通过props来接收参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
| var myRouter = new VueRouter({
routes: [
{ path: "/user/:id", component: User,props:true }
]
}
var User = {
props:["id"],
template:"<div>用户：{{id}}</div>"
}
|
也可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
| var myRouter = new VueRouter({
routes: [
{ path: "/user/:id", component: User,props:{username:"jack",pwd:123} }
]
}
var User = {
props:["username","pwd"],
template:"<div>用户：{{username}}---{{pwd}}</div>"
}
|
3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| var myRouter = new VueRouter({
routes: [
{ path: "/user/:id", component: User,props:(route)=>{
return {username:"jack",pwd:123,id:route.params.id}
}
}
]
}
var User = {
props:["username","pwd","id"],
template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>"
}
|
6.命名路由
给路由取别名
1
2
3
4
5
6
7
8
9
10
11
12
13
| var myRouter = new VueRouter({
routes: [
{ path: "/user/:id", component: User, name:"user"}
]
}
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>
myRouter.push( { name:'user' , params: {id:123} } )
|
7.编程式导航
页面导航的两种方式：
A.声明式导航：通过点击链接的方式实现的导航
B.编程式导航：调用js的api方法实现导航
1
2
3
4
5
6
7
8
9
|
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );
this.$router.go( -1 );
|
1
2
3
4
5
6
7
8
9
10
11
| const User = {
template: `<div>
<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
<button @click="goRegister">跳转到注册页面</button>
</div>`,
methods: {
goRegister() {
this.$router.push('/register')
}
},
}
|
