vue-router

路由本质就是对应关系
后端路由：根据不同的用户URL请求返回不同内容，本质是URL请求地址与服务器资源之间的对应关系
前端路由：根据不同用户事件显示不同页面关系，本质是用户时间与事件处理函数之间的对应关系
早期使用后端渲染，反复刷新很麻烦
后来出现ajax前端渲染（前端渲染提高性能但是不支持前进后退）
SPA（单页面应用程序）：整个网站只有一个页面，内部变化通过ajax局部更新实现，同时支持李路蓝旗地址栏的前进后退
SPA实现原理之一：基于URL地址的hash（hash变化会导致浏览器记录访问历史变化，但不会触发新的URL请求）
//监听window的onhashchange事件，根据获取的最新hash值切换要显示的组件名称
window.onhashchange = function () {
//通过location.hash获取最新的hash值
};

vue-router基本使用步骤
1.引入相关库文件
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
2.添加路由连接
<router-link to="/user"></router-link>
router是vue中提供标签，默认渲染成a标签，to属性默认被渲染为href属性，to属性值默认被渲染成#开头的hash地址
3.添加路由填充位（也叫路由占位符）
<router-view></router-view>通过路由规则匹配到的组件会被渲染到router-view所在位置
4.定义路由组件
var user = {templats: '<div>user</div>'}
5.配置路由规则并创建路由实例

//创建路由实例对象
var router = now VueRouter({
	routes: [ //routes是路由规则数组
		{path: '/user', component: User}, //每个路由规则都是一个配置对象，至少包含path和component两个属性
		{path: '/', redirect: '/user'}, //path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
		{path: '/user', component: User}, //path表示当前路由规则匹配的hash地址，component表示当前路由规则对应展示组件
	]
}) 

6.把路由挂载到Vue根实例中

new Vue({
	el: '#app',
	router //为了让路由规则生效必须把路由对象挂载到vue实例对象上
});

嵌套路由
父级路由通过children属性配置自己路由

//创建路由实例对象
var router = now VueRouter({
	routes: [ //routes是路由规则数组
		{path: '/user', component: User}, //每个路由规则都是一个配置对象，至少包含path和component两个属性
		{
		path: '/user',
		component: User,
		chindren: [
			{path: '/user', component: User},
			{path: '/user', component: User}
			]
		}
	]
}) 

动态路由匹配
通过动态路由参数的模式进行路由匹配

var router = now VueRouter({
	routes: [
		{path: '/user/:id', component: User}, //动态路径参数以冒号开头
	]
}) 

const User = {
	template: '<div>User {{ $router.params.id }}</div>' //路由组件中通过$router.params获取路由参数
}

路由组件传递参数

// props值为布尔型
var router = now VueRouter({
	routes: [
		{path: '/user/:id', component: User, props: true}, //props值为布尔型，router.params将会被设置为组件属性
	]
}) 

const User = {
	props: ['id'], //使用props接收路由参数
	template: '<div>User {{ id }}</div>' //使用路由参数
}

// props值为对象类型
var router = now VueRouter({
	routes: [
		{path: '/user/:id', component: User, props: { uname: 'lisi', age: '12'}}, //props值为对象类型，他会被按原样设置为组件属性
	]
}) 

const User = {
	props: ['uname', 'age'],
	template: '<div>User {{ uname + '---' + age }}</div>'// path中定义的id值不能传递
}

// props值为函数类型
var router = now VueRouter({
	routes: [
		{path: '/user/:id',
		component: User,
		props: route => ({ uname: '25', age: 20, id: route.params.id }, //props值为函数类型，这个函数接收route对象为自己的形参
	]
}) 

const User = {
	props: ['uname', 'age', 'id'],
	template: '<div>User {{ uname + '---' + age + '---' + id }}</div>'
}

命名路由

var router = now VueRouter({
	routes: [
		{
		path: '/user/:id',
		name: 'user',
		component: User,
		}
	]
}) 
<router-link to="{ name: 'user', params: { id:123}}">User</router-link>
router.push({ name: 'user', params: { id:123}}) //编程式导航

页面导航两种方式

声明式导航：点击链接实现导航，如<a></a>或<router-link></router-link>
编程式导航：调用JavaScript形式的API实现导航，如location.href

编程式导航API
this.$router.push('hash地址')
this.$router.go(n)n是指前进后退的次数正负皆可

router.push('/home')字符串（路径名称）
router.push({ path: '/home' })对象
router.push({ name: '/home', params: {userId: 123}})命名的路由（传递参数）
router.push({ path: '/home', query: {uname: 'lisi' }})带查询参数变成/home?uname=lisi