建个网站需要多少钱? 知乎淘宝关键词查询
路由独有的两个生命周期钩子
作用：用于捕获路由组件的激活状态
具体名字：
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