路由：本质就是对应关系
后端路由：根据不同的URL地址分发不同的资源；
前端路由：根据不同的用户事件，显示不同的页面内容；本质是用户与事件处理函数直接的对应关系。（负责事件监听，触发事件后，通过事件函数渲染不同内容）
SPA：即单页面应用程序，整个页面只有一个页面，内容的变化通过Ajax更新实现、同时支持浏览器地址栏的前进和后退操作；spa的实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求)；在实现spa的过程中，最核心的技术点就是前端路由。
Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有：支持HTML5历史模式或hash模式；支持嵌套路由；支持路由参数；支持编程式路由；支持命名路由；
-
1、Vue-router的基本使用步骤
（1）引入相关的库文件
<!--导入Vue文件，为全局window对象挂载Vue构造函数--> <script src="vue.js"></script> <!--导入vue-router文件，为全局window对象挂载VueRouter构造函数--> <script src="vue-router.js"></script>
（2）添加路由链接
<!--router-link 是vue中提供的标签，默认会被渲染为a标签--> <!--to属性默认会渲染为href属性--> <!--to属性的值默认会被渲染为#开头的hash地址--> <router-link to="/user">User</router-link>
（3）添加路由填充位
<!--路由填充位（也叫做路由占位符）--> <!--将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置--> <router-view></router-view>
（4）定义路由组件
const user = {
template: `<div>User</div>`
}
（5）配置路由规则并创建路由实例
const router = new VueRouter({
//routes是路由规则数组
routes: [
//每个路由规则都是一个配置对象，其中至少包含path和commponent两个属性：
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展示的组件
{path: '/user', component: User}
]
})
（6）把路由挂载到Vue根实例中
new Vue({
el:'#app',
//为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
router
});
注：
路由重定向：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
const router = new VueRouter({
routes: [
{path: '/', redirect: '/user'},
{path: '/user', component: User}
]
})
-
2、Vue-router嵌套路由用法
（1）用法
①嵌套路由功能分析：
点击父级路由链接显示模板内容；模板内容中又有子级路由链接；点击子级路由链接显示子级模板内容；
②父路由组件模板
父级路由链接；父组件路由填充位；
③子路由模板
子级路由链接；子级路由填充位；
④嵌套路由配置
父级路由通过children属性配置子级路由；
（2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-router的嵌套路由用法</title>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
<router-view></router-view>
</div>
</div>
<script>
const User = {
template: `<div><h2>User组件</h2></div>`
}
const Register = {
template: `
<div>
<h2>Register组件</h2>
<hr>
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</router-link>
<router-view></router-view>
</div>
`
}
const Tab1 = {
template: `<div><h3>Tab1</h3></div>`
}
const Tab2 = {
template: `<div><h3>Tab2</h3></div>`
}
const router = new VueRouter({
routes: [
{path: '/user', component: User},
{
path: '/register', component: Register,
//通过children属性，为、register添加子路由规则
children: [
{path: '/register/tab1', component: Tab1},
{path: '/register/tab2', component: Tab2}
]
}
]
});
new Vue({
el: '#app',
router
});
</script>
</body>
</html>
-
3、Vue-router动态路由匹配用法
（1）用法
应用场景：通过动态路由参数的模式进行路由匹配
var router=new VueRouter({
routes:[
//动态路径参数 以冒号开头
{path:'/user:id',component:User}
]
});
const User={
//路由租金中通过$route.params获取路由参数
template:'<template>User{{$route.params.id}}</div>'
}
调用：
<router-link to="/user/1">User1</router-link>
（2）路由组件传递参数
$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。
①props的值为布尔类型
var router=new VueRouter({
routes:[
//如果props被设置为true，route.params将会被设置为组件属性
{path:'/user:id',component:User，props:true}
]
});
const User={
props:['id'],//使用props接收路由参数
//使用路由参数
template:'<template>User{{id}}</div>'
}
②props的值为对象类型
var router=new VueRouter({
routes:[
//如果props是一个对象，它会被按原样设置为组件属性
{path:'/user:id',component:User，props:{uname:'lisi',age:12}}
]
});
const User={
props:['uname','age'],//使用props接收路由参数
//使用路由参数
template:'<template>User{{uname +'-----'+age}}</div>'
}
③props的值为函数类型
var 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'],//使用props接收路由参数
//使用路由参数
template:'<template>User{{uname +'----'+age+'----'id}}</div>'
}
-
4、Vue-router命名路由用法
（1）命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
const router=new 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}})
-
5、Vue-router编程式导航用法
（1）页面导航的两种方式
声明式导航：通过点击链接实现导航的方式，叫做声明式导航。如：普通网页中的<a></a>或vue中的<router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。如：普通网页中的locations.href
（2）编程式导航基本用法
常用的编程式导航API如：this.$router.push('hash地址')和this.$router.go(n)
const User={
template:'<div><button @click="goRegister">跳转到注册页面</button></div>',
methods:{
goRegister:function(){
//用编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
（3）编程式导航参数规则
router.push()方法的参数规则：
//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名路由（传递参数）
router.push({name:'/user',params:{userId:123}})
//带查询参数，变成/register?uname=lisi
router.push({path:'/register',query:{uname:'lisi'}})
