兩個新的生命周期鉤子
activated和deactivated是路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)具體使用
activated路由組件被激活時觸發(fā)
deactivated路由組件失活時觸發(fā)
?
src/pages/News.vue
<template>
<ul>
<li :style="{opacity}">歡迎學(xué)習(xí)Vue</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></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>
路由守衛(wèi)
對路由權(quán)限進行控制
meta元數(shù)據(jù)對象
全局路由守衛(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:'關(guān)于'}
},
{
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:'xiangqing',
// path: 'detail/:id/:title', //使用占位符聲明接收params參數(shù)
path:'detail', //使用query參數(shù)
component: Detail,
meta:{isAuth:true,title:'詳情'},
//第一種寫法：props值為對象，該對象中所有的key-value的組合都會通過props傳給Detail組件
// props:{a:'100',b:'1'},
//第二種寫法：props值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件
// props:true,
//第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件
props($route){
return{
id:$route.query.id,
title:$route.query.title
}
}
}
]
}
]
}
]
})
// 全局前置路由守衛(wèi)--初始化的時候、每次路由切換之前被調(diào)用
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判斷是否需要鑒權(quán)
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('學(xué)校名不對，無權(quán)限查看！')
}
}else{
next()
}
})
// 全局路由后置守衛(wèi)--初始化的時候、每次路由切換之后被調(diào)用
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
document.title=to.meta.title||'硅谷系統(tǒng)'
})
export default router獨享路由守衛(wèi)beforeEnter
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: '關(guān)于' }
},
{
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('beforeEach', to, from)
if (to.meta.isAuth) { //判斷是否需要鑒權(quán)
if (localStorage.getItem('school') === 'atguigu') {
next()
} else {
alert('學(xué)校名不對，無權(quán)限查看！')
}
} else {
next()
}
}
},
{
name: 'xiaoxi',
path: 'message',
component: Message,
meta: { isAuth: true, title: '消息' },
children: [
{
name: 'xiangqing',
// path: 'detail/:id/:title', //使用占位符聲明接收params參數(shù)
path: 'detail', //使用query參數(shù)
component: Detail,
meta: { isAuth: true, title: '詳情' },
//第一種寫法：props值為對象，該對象中所有的key-value的組合都會通過props傳給Detail組件
// props:{a:'100',b:'1'},
//第二種寫法：props值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件
// props:true,
//第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
}
}
]
}
]
}
]
})
// 全局路由后置守衛(wèi)--初始化的時候、每次路由切換之后被調(diào)用
router.afterEach((to, from) => {
console.log('afterEach', to, from)
document.title = to.meta.title || '硅谷系統(tǒng)'
})
export default router
?
組件內(nèi)路由守衛(wèi)
從/home跳轉(zhuǎn)到/about前觸發(fā)beforeRouteEnter，從/about跳轉(zhuǎn)到/test前觸發(fā)beforeRouteLeave
src/pages/About.vue
<template>
<h2>我是About的內(nèi)容</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('學(xué)生名不對，無權(quán)查看！')
}
},
beforeRouteLeave(to, from, next){
console.log('About--beforeRouteLeave',to,from);
next()
}
}
</script>路由器的兩種工作模式
?
const router=new VueRouter({
mode:'history',
routes:[...]
})
export default router項目打包npm run build
demo目錄下
第一步：npm init出現(xiàn)package name:atguigu_test_server
第二步：npm i express
第三步：打開npmjs.com網(wǎng)站搜索connect-history-api-fallback
npm i connect-history-api-fallback
?
?文章來源地址http://www.zghlxwxcb.cn/news/detail-594665.html文章來源：http://www.zghlxwxcb.cn/news/detail-594665.html
?
到了這里，關(guān)于Vue-Router相關(guān)理解4的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
