VueRouter是Vue构建单页面应用的官方路由。使用起来也非常方便，在不刷新页面的情况下更改了URl，简单总结一下相关的概念。
组件与显示
<router-link>与<router-view>配合使用，这里的link相当于一个a标签，而view则是将对应的组件显示出来。可以放在任何地方。
嵌套路由
子组件作为router-view显示在父组件的视图中的同时，也可以拥有下一层组件的router-view。要将孙子组件渲染到这个嵌套的router-view中，我们需要在路由中配置children。 只要在route配置里的component的里加上children对应的组件以及路由，子组件的router-view就可以显示出对应的视图。
history&hash模式
hash模式在实际的url前面使用了一个字符#，这部分url不会被发送到服务器。所以即使没有做到对路由的全覆盖，也不会返回404，但是SEO不友好。 history模式发送的就是完整的url，但是如果缺少对部分路由的配置就会返回404。解决方式是配合后端，增加一个回退路由，对应到index.html。
导航守卫
通过监控路由跳转的过程，在跳转的各个过程执行相应的操作。经常用来实现登录控制。
全局守卫
- beforeEach
beforeEach接受3个参数，
to,from,next，可以用于实现登录验证，在路由还没有跳转的时候告知。
router.beforeEach((to,from,next)=>{
const nextRoute=['api','my/index','xxx']
if (nextRoute.indexOf(to.name)>=0){
if(!store.state.auth.isLogin){
vueRouter.push({name:'/login'})
}
}
next()
})
- beforeResolve
- afterEach 路由独享守卫
- beforeEnter 组件内守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
懒加载
当路由被访问的时候再加在对应组件。vueRouter只会在第一次进入页面的时候获取函数，然后使用缓存数据。
// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')
