一、路由的基本概念和原理

1.1 路由的概念

    路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 
    当我们输入要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
    那么url地址和真实的资源之间就有一种对应的关系，就是路由。
    路由分为前端路由和后端路由。
1
2
3
4

1.1.1 后端路由

	概念：根据不同的用户 URL 请求，返回不同的内容 
	本质：URL 请求地址与服务器资源之间的对应关系
	后端路由是由服务器端进行实现，并完成资源的分发
1
2
3

1.1.2 前端路由

 	概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
	前端路由主要做的事情就是监听事件并分发执行事件处理函数
	前端路由是依靠hash值(锚链接)的变化进行实现
1
2
3

二、Vue Router的基本使用

2.1 Vue Router概念

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 
它和 Vue.js 的核心深度集成，可以非常方便的用于SPA（single page web application,单页应用程序）应用程序的开发。
1
2

2.2 Vue Router特性

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为
1
2
3
4
5
6
7
8
9

2.3 Vue Router基本使用

2.3.1 引入相关的库文件

<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
注意：要先导入vue库文件，因为vue router是依赖于vue的，顺序不能错
1
2
3

2.3.2 添加路由链接

<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性：
to属性的值默认会被渲染为 # 开头的 hash 地址：
        	
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
1
2
3
4
5

2.3.3 添加路由填充位（路由占位符）

将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置
<router-view></router-view> 
1
2

2.3.4 定义路由组件

const User = {
    template: '
User 组件
'
}

const Register = {
    template: '
Register 组件
'
}
1
2
3
4
5
6
7

2.3.5 配置路由规则并创建路由实例

// 创建路由实例对象
var router = new VueRouter({
	// routes 是路由规则数组
	routes: [
		// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
		// path 表示当前路由规则匹配的 hash 地址
		// component 表示当前路由规则对应要展示的组件
		{path:'/user',component: User},
		{path:'/register',component: Register}
	]
})
1
2
3
4
5
6
7
8
9
10
11

2.3.6 把路由挂载到 Vue 根实例中

const vm = new Vue({
	// 指定控制的区域
	el: '#app',
	data: {},
	// 挂载路由实例对象
	// router: router
	router
})
1
2
3
4
5
6
7
8

2.4 路由重定向

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
var myRouter = new VueRouter({
	//routes是路由规则数组
	routes: [
		//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
		{ path:"/",redirect:"/user"},
		{ path: "/user", component: User },
		{ path: "/login", component: Login }
	]
})
1
2
3
4
5
6
7
8
9
10

三、Vue Router嵌套路由

3.1 嵌套路由功能分析

点击父级路由链接显示模板内容 
模板内容中又有子级路由链接 
点击子级路由链接显示子级模板内容
1
2
3

3.2 父级路由模板

父级路由的定义跟上一节的基础使用一样
<div id="app">
	<router-link to="/user">User</router-link>
	<router-link to="/register">Register</router-link>

	<!-- 路由占位符 -->
	<router-view></router-view>
</div>
1
2
3
4
5
6
7
8

3.3 子级路由模板

子级路由要定义在父级组件内部，代码如下：
const Register = {
	template: `

		
Register 组件
		


			
			tab1
			tab2

			
			
		`
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.4 嵌套路由配置

// 创建路由实例对象
const router = new VueRouter({
	// 所有的路由规则
	routes: [
		{ path: '/', redirect: '/user'},
		{ path: '/user', component: User },
		// children 数组表示子路由规则
		{ path: '/register', component: Register, children: [
			{ path: '/register/tab1', component: Tab1 },
			{ path: '/register/tab2', component: Tab2 }
		] }
	]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

四、Vue Router动态路由匹配

4.1 动态路由匹配的基本用法

应用场景：通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
	routes: [
		// 动态路径参数 以冒号开头
		{ path: '/user/:id', component: User }
	]
})

const User = {
	// 路由组件中通过$route.params获取路由参数
	template: '
User {{ $route.params.id }}
'
}
1
2
3
4
5
6
7
8
9
10
11
12

4.2 动态路由组件传递参数

    上一节我们可以发现，获取路由参数的$route与对应路由形成高度耦合，不够灵活
    所以可以使用props将组件和路由解耦
1
2

4.2.1 props的值为布尔类型

const router = new VueRouter({
	routes: [
		// 如果 props 被设置为 true，route.params 将会被设置为组件属性
		{ path: '/user/:id', component: User, props: true }
	]
})

const User = {
	props: ['id'], // 使用 props 接收路由参数
	template: '
用户ID：{{ id }}
' // 使用路由参数
}
1
2
3
4
5
6
7
8
9
10
11

4.2.2 props的值为对象类型

const router = new VueRouter({
	routes: [
		// 如果 props 是一个对象，它会被按原样设置为组件属性
		{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }}
	]
})

const User = {
	props: ['uname', 'age'],
	template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'
}
1
2
3
4
5
6
7
8
9
10
11

4.2.3 props的值为函数类型

const router = new VueRouter({
	routes: [
		// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参
		{ 
    		path: '/user/:id',
   	 		component: User,
   	 		props: route => ({ uname: 'zs', age: 20, id: route.params.id })
		}
	]
})

const User = {
	props: ['uname', 'age', 'id'],
	template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

五、Vue Router命名路由

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
const router = new VueRouter({
	routes: [
		{
			path: '/user/:id',
			name: 'user',
			component: User
		}
	]
  })

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>    
1
2
3
4
5
6
7
8
9
10
11
12

六、Vue Router编程式导航

6.1 页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的 location.href
1
2
3
4
5

6.2 编程式导航基本用法

常用的编程式导航 API 如下： 
this.$router.push('hash地址') 
const User = {
	props: ['id', 'uname', 'age'],
	template: `

			
User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}
			跳转到注册页面
		`,
	methods: {
		goRegister() {
			this.$router.push('/register')
		}
	},
}

this.$router.go(n)
const Register = {
	template: `

			
Register 组件
			后退
		`,
	methods: {
		goBack() {
			this.$router.go(-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

总结