目标：
能够说出路由的概念
能够说出Vue-router的基本使用步骤
能够说出Vue-router的嵌套路由用法
能够说出Vue-router动态路由匹配用法
能够说出Vue-router命名路由用法
能够说出Vue-router编程式导航用法
能够基于路由的方式实现业务功能
目录：
路由的基本概念与原理
vue-router的基本使用
vue-router嵌套路由
vue-router动态路由匹配
vue-router命名路由
vue-router编程式导航
基于vue-router的案例
1、路由的基本概念与原理
1.1、路由
路由是一个比较广义和抽象的概念，路由的本质就是对应关系
在开发中，路由分为：
后端路由
前端路由
后端路由
概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系
SPA(Single Page Application)
后端渲染（存在性能问题）
Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作）
SPA单页面应用程序：整个网站之后一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址的前进后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
在实现SPA过程中，最核心的技术就是前端路由
前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
前端路由负责事件监听，触发事件后，通过事件函数渲染不同的内容。
实现简易前端路由
基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
//监听windows的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
windows.onhashchange = function(){ //通过location.hash获取到最新的hash值 }
1.2、Vue Router
Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有：
支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
2、vue-router的基本使用
2.1、基本使用步骤
引入相关的库文件
//导入vue文件，为全局window对象挂载Vue构造函数 <script src="./lib/vue_2.5.22.js"></script> //导入vue-router文件，为全局window对象挂载VueRouter构造函数 <script src="./lib/vue-router_3.0.2.js"></script>
添加路由链接
//router-link是vue中提供的标签，默认会被渲染为a标签 //to属性默认会被渲染为href属性 //to属性的值默认会被渲染为#开头的hash地址 <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link>
添加路由填充位
//路由填充位（也叫做路由占位符） //将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 <router-view></router-view>
定义路由组件
var User = { template:‘<div>User</div>‘ } var Register = { template:‘<div>Register</div>‘ }
配置路由规则并创建路由实例
//创建路由实例对象 var router = new VueRouter({ //routes是路由规则数组 routes:[ //每个路由规则都是一个配置对象，其中至少包含path和component两个属性： //path表示当前路由规则匹配的hash地址 //component表示当前路由规则对应要展示的组件 {path:‘/user‘,component:User}, {path:‘/register‘,component:Register} ] })
把路由挂载到Vue根实例中
new Vue({ el:‘#app‘, //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上 router })
2.2、路由重定向
路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向：
var router = new VueRouter({ routes:[ //其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址 {path:‘/‘,redirect:‘/user‘}, {path:‘/user‘,component:User}, {path:‘/register‘,component:Register} ] })
3、vue-router嵌套路由
3.1、嵌套路由用法
嵌套路由功能分析
点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容
父路由组件模板
父级路由链接
父组件路由填充位
<p>
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
//控制组件显示位置
<router-view></router-view>
</div>
自己路由模板
子级路由链接
子级路由填充位
const Register = { template:`<div> <h1>Register组件</h1> <hr/> <router-link to="/register/tab1">Tab1</router-link> <router-link to="/register/tab1">Tab1</router-link> //子路由填充位置 <router-view/> </div>` }
嵌套路由配置
父级路由通过children属性配置子路由
var 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} ] } ] })
原文：https://www.cnblogs.com/michealyang/p/13739192.html