6.12.activated deactivated
activated和deactivated是路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)具體使用
- activated路由組件被激活時觸發(fā)
- deactivated路由組件失活時觸發(fā)
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.路由守衛(wèi)
作用：對路由進行權限控制
分類：全局守衛(wèi)、獨享守衛(wèi)、組件內守衛(wèi) 全局守衛(wèi)
-
全局守衛(wèi)
- meta路由源信息
// 全局前置守衛(wèi)：初始化時、每次路由切換前執(zhí)行 router.beforeEach((to,from,next) => { console.log('beforeEach',to,from); if(to.meta.isAuth){ // 判斷當前路由是否需要進行權限控制 if(localStorage.getItem('school') === 'atguigu'){ // 權限控制的具體規(guī)則 next(); // 放行 } else { alert('暫無權限查看'); } } else { next(); // 放行 } }) // 全局后置守衛(wèi)：初始化時、每次路由切換后執(zhí)行 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路由源信息
-
獨享守衛(wèi)
beforeEnter(to,from,next){ console.log('beforeEnter',to,from); if(localStorage.getItem('school') === 'atguigu') { next(); } else { alert('暫無權限查看'); } }) -
組件內守衛(wèi)
//進入守衛(wèi)：通過路由規(guī)則，進入該組件時被調用 beforeRouteEnter (to, from, next) {... next()}, //離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調用 beforeRouteLeave (to, from, next) {... next()},
6.13.1.全局路由守衛(wèi)
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';
// 創(chuàng)建并暴露一個路由器
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
}
}
}
]
}
]
}
]
})
// 全局前置路由守衛(wèi)————初始化的時候、每次路由切換之前被調用
router.beforeEach((to,from,next) => {
console.log('前置路由守衛(wèi)',to,from);
if(to.meta.isAuth){
if(localStorage.getItem('school')==='atguigu'){
next();
} else{
alert('學校名不對，無權限查看！');
}
} else {
next();
}
});
// 全局后置路由守衛(wèi)————初始化的時候被調用、每次路由切換之后被調用
router.afterEach((to,from) => {
console.log('后置路由守衛(wèi)',to,from);
document.title = to.meta.title || '硅谷系統(tǒng)';
});
export default router;
6.13.2.獨享路由守衛(wèi)
src/router/index.js文章來源：http://www.zghlxwxcb.cn/news/detail-515674.html
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';
// 創(chuàng)建并暴露一個路由器
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:'新聞'},
// ??獨享守衛(wèi)，特定路由切換之后被調用
beforeEnter(to,from,next){
console.log('前置路由守衛(wèi)',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
}
}
}
]
}
]
}
]
})
// 全局前置路由守衛(wèi)————初始化的時候、每次路由切換之前被調用
// router.beforeEach((to,from,next) => {
// console.log('前置路由守衛(wèi)',to,from);
// if(to.meta.isAuth){
// if(localStorage.getItem('school')==='atguigu'){
// next();
// } else{
// alert('學校名不對，無權限查看！');
// }
// } else {
// next();
// }
// });
// 全局后置路由守衛(wèi)————初始化的時候被調用、每次路由切換之后被調用
// router.afterEach((to,from) => {
// console.log('后置路由守衛(wèi)',to,from);
// document.title = to.meta.title || '硅谷系統(tǒng)';
// });
export default router;
6.13.3.組件內路由守衛(wèi)
src/pages/About.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-515674.html
<template>
<h2>我是About的內容</h2>
</template>
<script>
export default {
name: "About",
// 通過路由規(guī)則，進入該組件時被調用
beforeRouteEnter (to, from, next) {
console.log('About--beforeRouteEnter', to, from);
if(localStorage.getItem('school') === 'atguigu') {
next();
} else {
alert('學校名不對，無權限查看！');
}
},
// 通過路由規(guī)則，離開該組件時被調用
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;
到了這里，關于Vue Router activated deactivated 路由守衛(wèi)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
