简介
使用Vue.js开发SPA（Single Page Application）单页面应用。
vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；
vue-router可以实现页面间传参等其他功能；
基本用法
当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
首先我们需要定义链接url，而vue-router使用<router-link>对a标签进行包装。
HTML:
<div id="app"> <div> <!-- 通过router-link来导航，to属性指定链接， 默认 会渲染成a标签 --> <router-link to="/home">Home</router-link> <router-link to="/user">User</router-link> </div> <div> <!-- 路由出口，路由匹配到的组件将在这里渲染 --> <router-view></router-view> </div></div>
Javascript:
//1.定义(路由)组件 var home = {template:'<p>This is Home Page。。。</p>'} var user = {template:'<p>This is User Page</p>'} //2.定义路由，这是一组路由，每个路由使用一个大括号 const routes = [ {path:'/home',component:home}, {path:'/user',component:user} ]; //3.创建路由实例,然后传入路由配置 var router= new VueRouter({ routes //缩写，相当于routes:routes }); //4.在Vue实例中注入路由 var vm = new Vue({ el:'#app', router //缩写,相当于router:router });运行一下，可以完美的跑起来。
router-link类样式
我们看一下控制台Elements，发现确实变成了<a>标签,并且还为当前选定的<router-link>添加了class “router-link-exact-active”和“router-link-active”，我们可以为其添加类样式。
还可以重新设置它的名称只需要在router路由实例中配置。
linkActiveClass:'active'//或其他值
HTML5 History模式
我们看路径，默认会给前面加上#号，可能会看起来很丑,我们可以使用HTML5 History模式。这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
const router = new VueRouter({ mode: 'history', routes: [...]});而如果你这样做的话，后台服务器需要配置，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，可能就会出现404页面。那么就需要一个通配符的方法解决,你可以使用重定向。
3.重定向
1.通过路径方式
const routes=[ .... //若为/,表示默认重定向/home路径，*则表示匹配任何则重定向到 {path:'/',redirect:'/home'}//或者{path:'*',redirect:'/home'}]当匹配找不到的时候，就会转到这个路由。
2.通过路由名称
当然还可以通过路由名称的方式重定向,前提是你为路由设置了name参数
const routes = [ {path:'/user',component:user,name:'user'},//此时通过name设置路由名称 {path:'/',redirect:{name:'user'}}//此处通过name属性给与路由名称];嵌套路由
嵌套路由无非是在路由里再加路由，与组件一样。
假如user中需要login和regist
//重新为user定义模板<template id="user"> <div> <ul> <li><router-link to="/user/login">User Login</router-link></li> <li><router-link to="/user/regist">User Regist</router-link></li> </ul> <router-view></router-view> </div></template>//为user路由添加子路由children:[ {path:'login',component:login}, {path:'regist',component:regist}}//定义组件var login = {template:'<p>用户登录</p>'}var regist = {template:'<p>用户注册</p>'}运行一下，可以正常显示。
注意user模板中的router-link和router-view，他俩是一一对应的，跟外面的不一样。
router-link标签渲染
前面说过，router-link的默认渲染为<a>标签，我们可以更改,通过tag属性
<router-link to="/user/login" tag="li">User Login</router-link><router-link to="/user/regist" tag="li">User Regist</router-link>
动态路由匹配
如果我们通过路径路径来匹配到某个路由。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』。
通俗地讲就是参数嘛，
字符串参数 ?uname=xiao&pwd=123
rest风格传参 /yao/456
当然我们这样映射路由的话，肯定是要参数值的，字符串的获得参数和rest获得参数使用了不同的方法
字符串参数 $route.query
rest风格参数 $route.params
//字符串参数的方式无需配置映射路径,直接显示var login = {template:'<p>用户登录,获取参数,{{$route.query}}</p>'}//rest方式children:[ {path:'login',component:login}, {path:'regist/:uname/:pwd',component:regist}]var regist = {template:'<p>用户注册,获取参数,{{$route.params}}</p>'}主要说一下第二种动态路径参数，它类似REST ful,匹配的路径都能够映射,一个『路径参数』使用冒号 : 标记 ,当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
响应路由参数的变化
当使用路由参数时，例如从 /user/login 导航到 /user/regist，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象
watch: { '$route' (to, from) { // 对路由变化作出响应... } }匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
编程式导航
router.push向当前添加一个路由并使用
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)
注意:在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
| 声明式 | 编程式 |
|---|---|
| <router-link :to="..."> | router.push(...) |
//this.$router.push("home");//字符串，值为路由名称//this.$router.push({path:'/user'});//对象，path指定路径//this.$router.push({name:'regist',params:{uname:'chen',pwd:123}});//动态参数路由//this.$router.push({path:'/user/login',query:{uname:'chen',pwd:123}});//带查询参数以及router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123注意：如果提供了 path，params 会被忽略
你还需注意，你使用的方式是query还是params，如果你的path使用的是：标注方式的，则使用params，否则使用query
router.replace替换掉当前记录
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
| 声明式 | 编程式 |
|---|---|
| <router-link :to="..." replace> | router.replace(...) |
其语法结构与router.push方法完全一样，只不过重要的是，不会生成一条历史记录。
router.go(n)前进或后退
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward()router.go(1)// 后退一步记录，等同于 history.back()router.go(-1)// 前进 3 步记录router.go(3)// 如果 history 记录不够用，那就默默地失败呗router.go(-100)router.go(100)
随时随地看视频
