安装：npm install vue-router --save
在模块化工程中使用
第一步：导入路由对象，并调用Vue.use。
第二部：创建路由实例，并传入路由映射配置。
第三步：在vue实例中挂载创建的路由实例
使用步骤：
1，创建路由组建。2配置路由映射。3使用路由：<router-link>,<router-view>
<router-link to='/home'>我的</router-link>他会被渲染成一个a标签，他还有其他属性
tag：<router-link to='/home' tag=‘button’>我的</router-link>改成button按钮
tag：可以指定<router-link>渲染成什么，如button，li
replace：不会留下histoty记录，就是回退键不会返回上一个网页。
active-class：当路由匹配成功时，会自动给当前元素设置router-link-actived的class，而active-class就是用来修改这个默认class的
<router-view>，根据路径渲染显示组件内容
配置路由映射
const routers = [
{
path:'/home' //路径
component:home //对应组件
}
]
设置默认显示网页用redirect重定向到home路径
const routers = [
{
path:'/'
redirect:'/home'
}
]
默认情况使用的时不刷新跳转用的是hash，想用history可以在创建router实例添加配置
mode：‘history’
路由懒加载：
主要作用时将路由对应的组件打包成一个个的js代码块，只有这个路由被访问到才加载对应的组件：const home = ()=>import('../components/home')
路由的嵌套：
const home = ()=>import('../components/home')
const news= ()=>import('../components/news')
const routers = [
{
path:'/home' //路径
component:home //对应组件
children:[ //子路由
{
path:'news'
components:news
}
]
}
最后用<router-link to='/home/news'>新闻</router-link>和<router-view>在需要的页面添加渲染显示组件内容。默认路径配置不变
路由传递参数：
1通过params。2.通过query
全局导航守卫：
router.beforeEach((to,from,next)=>{ next()})前置守卫
每个守卫都有三个参数：
to：这是你要跳去的路由对象。
from：这是你要离开的路由对象。
next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安。必须给它打个招呼，要不然不让你过。
2 全局后置钩子 router.afterEach
钩子不会接受
函数也不会改变导航本身。这个可以看做保安的狗子，它不管你去哪里，也不会拦你，比较可爱。当然你也可以使用to和from对象。
3 路由独享守卫。beforeEnter
这个守卫是写在路由里面的，只有当进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的。
keep-alive：当跳转其他页面再回来时，都是重新创建渲染组件，如果不想重新渲染。
<keep-alive>
<router-view></router-view>
</keep-alive>他有两个重要的属性：include---正则表达式，只有符合的才会被缓存
exclude：---正则表达式，只有符合的才不会被缓存
