vue路由细节探讨

1.使用router-link 不会让页面刷新，使用a标签会使页面刷新。
2.router-link 里面的to="/路由地址" tag=""自定义标签" 默认为a标签,linkActiveClass 可以更改默认类名。
3.在 HTML5 history 模式下，router-link 会拦截点击事件，让浏览器不在重新加载页面。
4.当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。
5.传参：
<router-link :to="{ path: 'register', query: { userId: 'xxx' }}">Register</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
6.二级路由和多级路由配置就在当前路由下面配置children:[{path:"xxxx",name:"xxx",component:xxx}]
7.路由全局守卫（路由钩子函数）
router.beforeEach((to,from,next)=>{
    console.log("跳转前")
   //判断stroe.getter.isLogin ==== false
   // if(to.path=="/login" || to.path == "/register"){
   next();
    // }else{
          next("/login")
   // }
})
8.路由后置钩子函数
router.afterEach((to,from)=>{
     console.log("跳转后")
})

9.路由独享守卫：
就是在配置路由界面加上
router.beforeEach((to,from,next)=>{
    console.log("跳转前")
})

10.组件内守卫
进入时候
beforeRouterEnter:(to,from,next)=>{
next(vm=>{
     alert("vm.name")
})
离开时候
beforeRouterEnter:(to,from,next)=>{
    if(confirm("确定要离开么?") == true){
         next()
    }else{
        next(false)
   }
}