vue-router 路由3｜青训营

2、 缓存路由组件

2.1 缓存路由组件

作用:让不展示的路由组件保持挂载，不能被销毁

场景：项目开发时，大部分组件没必要进行多次渲染，增加http请求，从而使用组件缓存

具体编码:keep-alive
<keep-alive include="News">
      <router-view></router-view>
</keep-alive>

注意：

keep-alive中的include默认是所有组件，给上组件名才是确定某个组件不被销毁
当需要有多个组件需要缓存时，(:include="['News','Message']"),写成数组形式

2.2 两个新的生命周期钩子

作用：路由组件所独有的两钩子，用于捕获路由组件的激活状态

具体名字

activated：路由组件被激活时触发；第一次渲染时被调用，之后每次缓存组件被激活再调用，再次进入时，beforeCreate，Created，beforeMount，Mounted都不会被触发

deactivated：路由组件失活时触发；使用keep-alive之后，生命周期钩子少了beforeDestory和destoryed，由于组件被缓存了，所以想要再该组件销毁之前做一些事，需要使用该生命周期钩子替代

2.3 路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫(router.beforeEach、router.afterEach,例子中用的箭头函数)----直接在router文件夹下的index.js文件中内容的最后配置

    // 全局前置路由守卫(设置权限)------初始化时候、每一次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){//判断是否需要权限
        if(localStorage.getItem('name')==='jw'){ //权限控制具体规则
            next()//放行
        }else{
            alert('你不是用户，无权限查看')
        }
    }else{
        next()//放行
    }
})

独享守卫(beforeEnter)：单独一个路由所独享的，不用设置其他路由守卫---与全局守卫写法类似，但是放在某一个路由内

    beforeEnter:(to,from,next)=>{
    console.log("前置路由守卫",to,from)
    // if(to.path === '/home/news' || to.path === '/home/message'){
    // if(to.name === 'xinwen' || to.name === 'xiaoxi'){
    if(to.meta.isAuth){//判断是否需要权限
        if(localStorage.getItem('name')==='jw'){//权限控制具体规则
            next()//放行
        }else{
            alert('你不是用户，无权限查看')
        }
    }else{
        next()
    }
}

组件内守卫

    // 通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {……}
beforeRouteUpdate (to, from, next) {……}
// 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {……}

3. 路由器的两种工作模式 对于一个url来说，什么是hash值？

   及其后面的内容就是hash值

hash不会包含在http请求中，即:hash值不会带给服务器

hash模式：

    -- 地址中永远带着#号，不美观
    -- 若以后蒋地址通过第三方手机app分享，若app检验严格，则地址会被标记为不合法
    -- 兼容性较好

history模式

    -- 地址干净，美观
    -- 兼容性和hash相比略差
    -- 应用部署上线是需要后端人员支持，解决刷新也面服务端404的问题