目录：
路由：本质就是对应关系
后端路由：根据不同的URL地址分发不同的资源；
前端路由：根据不同的用户事件，显示不同的页面内容；本质是用户与事件处理函数直接的对应关系。（负责事件监听，触发事件后，通过事件函数渲染不同内容）
SPA：即单页面应用程序，整个页面只有一个页面，内容的变化通过Ajax更新实现、同时支持浏览器地址栏的前进和后退操作；spa的实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求)；在实现spa的过程中，最核心的技术点就是前端路由。
<!--导入Vue文件，为全局window对象挂载Vue构造函数--> <script src="vue.js"></script> <!--导入vue-router文件，为全局window对象挂载VueRouter构造函数--> <script src="vue-router.js"></script>
<!--router-link 是vue中提供的标签，默认会被渲染为a标签--> <!--to属性默认会渲染为href属性--> <!--to属性的值默认会被渲染为#开头的hash地址--> <router-link to="/user">User</router-link>
<!--路由填充位（也叫做路由占位符）--> <!--将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置--> <router-view></router-view>
const user = {
template: `<div>User</div>`
}
const router = new VueRouter({
//routes是路由规则数组
routes: [
//每个路由规则都是一个配置对象，其中至少包含path和commponent两个属性：
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展示的组件
{path: ‘/user‘, component: User}
]
})
new Vue({
el:‘#app‘,
//为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
router
});
注：
路由重定向：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
const router = new VueRouter({
routes: [
{path: ‘/‘, redirect: ‘/user‘},
{path: ‘/user‘, component: User}
]
})
<!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>
（1）用法
原文：https://www.cnblogs.com/hoaprox/p/14460611.html