vue路由的几种模式、vue-router、vue路由守卫

vue路由有几种模式

hash模式

即地址栏URL中的#符号，它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，不需要后台进行配置，因此改变hash不会重新加载页面。

history模式

利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法（需要特定浏览器支持）。history模式改变了路由地址，因为需要后台配置地址。

vue-router，keep-alive

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 router-link和router-view和keep-alive

keep-alive

做组件缓存的,把组件缓存起来不会销毁,下次打开这个组件直接显示出来,把切换出去的组件保留在内存中,保留他的状态避免重新渲染. include（包含） exclude（排出） name="a,b,c" activated 进入 deactivated 离开 组件实例期和挂载期的生命周期函数不会被执行。

路由守卫

全局守卫

1.全局前置守卫 router.beforeEach((to,from,next)=>{})

2.回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

3.全局后置守卫router.afterEach((to,from)=>{}) 只有两个参数，to：进入到哪个路由去，from：从哪个路由离。 如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。

• 组件内守卫 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }

离开这个组件时，beforeRouteLeave:(to,from,next)=>{}

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

• 路由独享守卫 beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。
  直接写在路由表里面。