6.12.activated deactivated
activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态具体使用
- activated路由组件被激活时触发
- deactivated路由组件失活时触发
src/pages/News.vue
<template>
<ul>
<li :style="{opacity}">欢迎学习vue</li>
<li>news001 <input type="text"></li></li>
<li>news002 <input type="text"></li></li>
<li>news003 <input type="text"></li></li>
</ul>
</template>
<script>
export default {
name: "News",
data(){
return {
opacity:1
}
},
activated() {
console.log('News组件被激活了');
this.timer = setInterval(() => {
this.opacity -= 0.01;
if(this.opacity <= 0) this.opacity = 1
},16)
},
deactivated() {
console.log('News组件失活了');
clearInterval(this.timer)
}
}
</script>
6.13.路由守卫
作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫 全局守卫
- 全局守卫
- meta路由源信息
// 全局前置守卫：初始化时、每次路由切换前执行 router.beforeEach((to,from,next) => { console.log('beforeEach',to,from); if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'atguigu'){ // 权限控制的具体规则 next(); // 放行 } else { alert('暂无权限查看'); } } else { next(); // 放行 } }) // 全局后置守卫：初始化时、每次路由切换后执行 router.afterEach((to,from) => { console.log('afterEach',to,from); if(to.meta.title) { document.title = to.meta.title;//修改网页的title } else { document.title = 'vue_test' ; } })
- meta路由源信息
- 独享守卫
beforeEnter(to,from,next){ console.log('beforeEnter',to,from); if(localStorage.getItem('school') === 'atguigu') { next(); } else { alert('暂无权限查看'); } }) - 组件内守卫
//进入守卫：通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) {... next()}, //离开守卫：通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) {... next()},
6.13.1.全局路由守卫
src/router/index.js
import VueRouter from 'vue-router';
// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detail from '../pages/Detail';
// 创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About,
meta:{title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children: [
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
children: [
{
name:'Detail', // name配置项为路由命名
path:'detail', // 使用占位符声明接收params参数
component:Detail,
meta:{isAuth:true,title:'详情'},
props($route){ // 这里可以使用解构赋值
return {
id: $route.params.id,
title: $route.params.title
}
}
}
]
}
]
}
]
})
// 全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {
console.log('前置路由守卫',to,from);
if(to.meta.isAuth){
if(localStorage.getItem('school')==='atguigu'){
next();
} else{
alert('学校名不对，无权限查看！');
}
} else {
next();
}
});
// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from) => {
console.log('后置路由守卫',to,from);
document.title = to.meta.title || '硅谷系统';
});
export default router;
6.13.2.独享路由守卫
src/router/index.js
import VueRouter from 'vue-router';
// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detail from '../pages/Detail';
// 创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About,
meta:{title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children: [
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'},
// 🔴独享守卫，特定路由切换之后被调用
beforeEnter(to,from,next){
console.log('前置路由守卫',to,from);
if(to.meta.isAuth){
if(localStorage.getItem('school')==='atguigu'){
next();
} else{
alert('学校名不对，无权限查看！');
}
} else {
next();
}
}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
children: [
{
name:'Detail', // name配置项为路由命名
path:'detail', // 使用占位符声明接收params参数
component:Detail,
meta:{isAuth:true,title:'详情'},
props($route){ // 这里可以使用解构赋值
return {
id: $route.params.id,
title: $route.params.title
}
}
}
]
}
]
}
]
})
// 全局前置路由守卫————初始化的时候、每次路由切换之前被调用
// router.beforeEach((to,from,next) => {
// console.log('前置路由守卫',to,from);
// if(to.meta.isAuth){
// if(localStorage.getItem('school')==='atguigu'){
// next();
// } else{
// alert('学校名不对，无权限查看！');
// }
// } else {
// next();
// }
// });
// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
// router.afterEach((to,from) => {
// console.log('后置路由守卫',to,from);
// document.title = to.meta.title || '硅谷系统';
// });
export default router;
6.13.3.组件内路由守卫
src/pages/About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: "About",
// 通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
console.log('About--beforeRouteEnter', to, from);
if(localStorage.getItem('school') === 'atguigu') {
next();
} else {
alert('学校名不对，无权限查看！');
}
},
// 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
console.log('About--beforeRouteLeave', to, from) ;
next();
}
}
</script>
6.14.路由器的两种工作模式
- 对于一个url来说，什么是hash值？ #及其后面的内容就是hash值
- hash值不会包含在HTTP请求中，即：hash值不会带给服务器
- hash模式
- 地址中永远带着#号，不美观
- 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
- 兼容性较好
- history模式
- 地址干净，美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
const router = new VueRouter({
mode:'history',
routes:[...]
})
export default router;
