Day16——路由2

路由独有的两个生命周期钩子

作用：用于捕获路由组件的激活状态
具体名字：
activated 路由组件被激活时触发
deactivated 路由组件失活时触发

现在在缓存路由组件的基础上,想要使h2中的文字透明度不断变化，在切换到别的组件时销毁控制文字不断变化的定时器
以前用的钩子：BeforeDestroy销毁定时器，但现在为保存表单数据设置了NewsInfo不被摧毁 ，所以使用BeforeDestroy销毁也没有用。
因此需要用到两个路由独有的生命周期钩子：activated(路由组件被激活时触发)和deactivated( 路由组件失活时触发)
NewsInfo.vue:

<ul>
   <h2 :style="{opacity}">欢迎学习vue</h2>
  ......
</ul>

activated(){   //打开页面，从没有出现到出现
        this.timer=setInterval(()=>{
            console.log("@@@")
            if(this.opacity<=0){
                this.opacity=1
            }
            this.opacity-=0.01
        },10)
    },
deactivated(){   //切换页面关闭定时器，同时不会影响到表单中数据的存储
        clearInterval(this.timer)
    }
}

路由守卫（三种）

meta元信息

在介绍三种路由守卫之前先介绍meta配置项

当有很多页面都需要设置权限，这样写太麻烦，所以可以给需要设置权限的页面对应的路由增加一个配置项：meta:{isAuth:true}，值为true表示需要设置权限

全局路由守卫

全局前置——路由守卫

全局前置路由守卫——初始化的时候被调用、每次路由被切换之前被调用
要求： 指定学校名字是atguigu,想要实现可以随意查看HomeInfo和AboutInfo,但是只有是这个学校的人才有权限查看MessageInfo和Newsinfo里的内容。

1.不能再写成：export default new VueRouter({}),否则就会刚创建完实例对象，瞬间就暴露了。应该先和router商量：只有是指定学校的人才有权限查看。所以换成const router。

const router= new VueRouter({})
......
export default router

index.js:

router.beforeEach((to,from,next)=>{  //三个参数，to是去哪里，from是来自哪里，next是决定是否往下执行
    // if(to.path==="/homeinfo/newsinfo" || to.path==="/homeinfo/messageinfo"){   //先判断查看的是否是MessageInfo和Newsinfo里的内容
        if(to.name==="xinwen" || to.name==="xinxi"){
            if(localStorage.getItem("school")==="atguigu"){   //如果查看的是里面的内容，且学校名字是指定的名字
                next()
            }  
            else{   //如果查看的是里面的内容，但学校名字不是指定的名字
                alert("你没有权限查看！")
            }
    }
    else{
        next()   //如果查看的不是指定的内容，则有权限查看，继续往下执行
    }
})

效果图：

简写优化：

index.js
给MessageInfo和NewsInfo路由添加：meta:{isAuth:true},

if(to.meta.isAuth){   //凡是这个值为真，就执行下面的代码
            if(localStorage.getItem("school")==="atguigu"){  
                next()
            }  
            else{   //如果查看的是里面的内容，但学校名字不是指定的名字
                alert("你没有权限查看！")
            }
    }
    else{
        next()   //如果查看的不是指定的内容，则有权限查看，继续往下执行
    }
})

全局后置——路由守卫

全局后置路由守卫——初始化的时候被调用、每次路由被切换之后被调用
要求： 这个案例是使document.title和打开的页面的title保持一致，但是仍然要写全局前置路由守卫，否则当打开没有权限的页面时，document.title应该显示主页，而它却显示消息或信息

在全局前置代码的基础上：

router.afterEach((to)=>{
   document.title=to.meta.title || "路由小练习"   
   //加上|| "路由小练习"为了防止刚开始打开的页面没有title，为了改变刚开始页面的title，需要把index.html文件中的title名字也改成相同的
})

效果图：

独享路由守卫

只给某一个页面设置权限
可以和全局后置路由守卫搭配使用

{
    name:"xiaoxi",
    path:"newsinfo",
    component:NewsInfo,
    meta:{isAuth:true,title:"消息" },
    //给xiaoxi添加独享守卫
    beforeEnter(to,from,next){
        if(to.meta.isAuth){
            if(localStorage.getItem("school")==="atguigu"){
                next()
            }
            else{
                alert("您没有权限查看！")
            }
        }
        else {
            next()
        }
    }
}

组件内路由守卫

写在设置权限的页面的组件内。分为进入(beforeRouteEnter)和离开(beforeRouteLeave)

//给xiaoxi添加组件内路由守卫
    // 通过路由规则，进入该组件时被调用
    beforeRouteEnter(to,from,next){
            if(to.meta.isAuth){
                if(localStorage.getItem("school")==="atguigu"){
                    next()
                }
                else{
                    alert("您没有权限查看！")
                }
            }
            else {
                next()
            }
        },
    // 通过路由规则，离开该组件时被调用
    beforeRouteLeave(to,from,next){
        next()
    }

路由的两种工作模式

hash模式

1.对于一个ur来说，hash值是：#及其后面的内容就是hash值。
2.hash值不会包含在HTTP请求中，即:hash值不会带给服务器。
hash模式:
1.地址中永远带着#号，不美观。
2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3.兼容性较好。

history模式

history模式是用“/”分隔开，没有“#”号
history模式:
1.地址干净，美观。
2.兼容性和hash模式相比略差。
3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
默认是hash模式，如果想要更改，代码如下：

const router= new VueRouter({
        mode:"hash",  //设置路由器的工作模式
        ......

mode只有两个值，hash或者history