Vue路由

路由：对应关系；
SPA：前端路由，基于URL地址的hash；
前端路由：概念：根据不同的用户事件，显示不同的页面内容；
本质：用户事件与事件处理函数之间的对应关系；

基本使用步骤：
1. 引入相关的库文件

2.  添加路由链接：
	<router-link to="/user">User</router-link>
	<router-link to="/register">Register</router-link>

3.  添加路由填充位：
	<router-view></router-view>

4.  定义路由组件：
	const User = {
        			template: '<h1>User</h1>'
    		}
    		const Register = {
        			template: '<h1>Register</h1>'
    		}

5.  配置路由规则并创建路由实例：
	const router = new VueRouter({
        			 routes: [
            			{ path: '/user', component: User },
            			{ path: '/register', component: Register }
        			]
    		})；

6.  把路由挂载到 Vue 根实例中：
	const vm = new Vue({
        			el: '#app',
        			data: {},
        			router,

路由重定向：
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

{path:'/', redirect: '/user'},

嵌套路由：
父级路由通过children属性配置子级路由：
{path: ‘/register’, component: Register, children: [
/* 这里路径要和子路由链接保持一致 */
{ path: ‘/register/tab1’, component: Tab1 },
{ path: ‘/register/tab2’, component: Tab2 }
]
}；

动态路由匹配：
var router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: ‘/user/:id’, component: User }
]
})；

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

路由组件传递参数：
1. props的值为布尔类型：
const router = new VueRouter({
routes: [
// 如果 props 被设置为 true，route.params 将会被设置为组件属性
{ path: ‘/user/:id’, component: User, props: true }
]
})

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

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>'
	}；

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>'
	}；

命名路由：
const router = new VueRouter({
routes: [
{
path: ‘/user/:id’,
name: ‘user’,
component: User
}
]
})；

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

编程式导航：
通过调用JavaScript形式的API实现导航的方式，叫做编程式导航;
常用的编程式导航 API 如下：
this.$router.push{(}^{\prime }hash地{址}^{\prime })this.$router.go(n);