6.5 編程式路由導(dǎo)航
-
作用：不借助
<router-link>實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活 -
具體編碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-437562.html
//$router的兩個(gè)API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward() //前進(jìn) this.$router.back() //后退 this.$router.go() //可前進(jìn)也可后退
6.6 緩存路由組件
- 作用：讓不展示的路由組件保持掛載，不被銷毀
- 具體編碼：
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
6.7 兩個(gè)新的聲明周期鉤子
- 作用：路由組件所獨(dú)有的兩個(gè)鉤子，用于捕獲路由組件的激活狀態(tài)。
- 具體名字：
（1）activated路由組件被激活時(shí)觸發(fā)
（2）deactivated路由組件失活時(shí)觸發(fā)
6.8 路由守衛(wèi)
- 作用：對(duì)路由進(jìn)行權(quán)限控制
- 分類：全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)
- 全局守衛(wèi)：
//全局前置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換前執(zhí)行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
if(localStorage.getItem('school') === 'atguigu'){ //權(quán)限控制的具體規(guī)則
next() //放行
}else{
alert('暫無(wú)權(quán)限查看')
// next({name:'guanyu'})
}
}else{
next() //放行
}
})
//全局后置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換后執(zhí)行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改網(wǎng)頁(yè)的title
}else{
document.title = 'vue_test'
}
})
router/index.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-437562.html
//該文件專門用于創(chuàng)建整個(gè)應(yīng)用的路由器
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)建一個(gè)路由器并暴露一個(gè)路由器
const router = new VueRouter({
routes: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: {title: '關(guān)于'}
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: {title: '主頁(yè)'},
children: [
{
path: 'news',
component: News,
meta: {isAuth: true, title: '新聞'}
},
{
name: 'xiaoxi',
path: 'message',
component: Message,
meta: {isAuth: true, title: '消息'},
children: [
{
name:'xiangqing',
path: 'detail',
component: Detail,
meta: {isAuth: true, title: '詳情'},
// props 的第一種寫法，值為對(duì)象,該對(duì)象中的所有 key-value都會(huì)以props的形式傳給Detail組件
// props: {a:1, b:'hello'}
// props 的第一種寫法，值為布爾值,若布爾值為真，就會(huì)把該路由組件收到的所有params參數(shù)，以props形式傳給Detail組件
// props: true,
// props 的第一種寫法，值為函數(shù)
props($route){
return {id: $route.query.id, title: $route.query.title}
}
}
]
}
]
},
]
})
// 全局前置路由守衛(wèi) ———— 初始化的時(shí)候被調(diào)用、每次路由切換之前被調(diào)用
router.beforeEach((to, from, next) => {
console.log('前置路由守衛(wèi)', to, from);
if(to.meta.isAuth){ //判斷是否需要鑒權(quán)
if(localStorage.getItem('school') === 'xianwenli'){
next()
}else{
alert('學(xué)校名不對(duì)，無(wú)權(quán)限查看！')
}
}else{
next()
}
})
// 全局后置路由守衛(wèi) ———— 初始化的時(shí)候被調(diào)用、每次路由切換之后被調(diào)用
router.afterEach((to, from) => {
console.log('后置路由守衛(wèi)', to, from);
document.title = to.meta.title || '系統(tǒng)'
})
export default router
- 獨(dú)享守衛(wèi)
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暫無(wú)權(quán)限查看')
// next({name:'guanyu'})
}
}else{
next()
}
}
- 組件內(nèi)路由守衛(wèi)
//進(jìn)入守衛(wèi)：通過(guò)路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi)：通過(guò)路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) {
}
6.9 路由器的兩種工作模式
- 對(duì)于一個(gè)url來(lái)說(shuō)，什么是hash值？——#及其后面的內(nèi)容就是hash值。
- hash值不會(huì)包含在HTTP請(qǐng)求中，即：hash值不會(huì)帶給服務(wù)器。
- hash模式：
（1）地址中永遠(yuǎn)帶著#號(hào)，不美觀。
（2）若以后地址通過(guò)第三方收集app分享，若app校驗(yàn)嚴(yán)格，則地址會(huì)被標(biāo)記為不合法。
（3）兼容性好 - history模式：
（1）地址干凈，美觀。
（2）兼容性和hash模式相比略差。
（3）應(yīng)用部署上線時(shí)需要后端人員的支持，解決刷新頁(yè)面服務(wù)端404的問(wèn)題。
第七章：Vue UI組件庫(kù)
7.1 移動(dòng)端常用 UI 組件庫(kù)
- Vant https://youzan.github.io/vant
- Cube UI https://didi.github.io/cube-ui
- Mint UI http://mint-ui.github.io
7.2 PC端常用 UI 組件庫(kù)
- Element UI https://element.eleme.cn
- IView UI https://www.iviewui.com
到了這里，關(guān)于編程式導(dǎo)航、緩存路由組件、路由守衛(wèi)、Vue UI組件庫(kù)【VUE】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
