vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼
vue 路由meta 設(shè)置title 導(dǎo)航隱藏,具體代碼如下所示:
router.js
routes: [{ path: ’/’, name: ’HelloWorld’, component: HelloWorld, meta: {title: 'HelloWorld', 要現(xiàn)實(shí)的titleshow: true設(shè)置導(dǎo)航隱藏顯示 } }]
App.vue
<template> <div id='app'> <router-view></router-view> <bottom v-show='this.$route.meta.show'></bottom> this.$route.meta.show 顯示或隱藏 </div> </template>
main.js
router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } next()})<br><br>監(jiān)聽(tīng)路由 寫(xiě)入 title
PS:vue 中路由meta
meta字段(元數(shù)據(jù))
直接在路由配置的時(shí)候,給每個(gè)路由添加一個(gè)自定義的meta對(duì)象,在meta對(duì)象中可以設(shè)置一些狀態(tài),來(lái)進(jìn)行一些操作。用它來(lái)做登錄校驗(yàn)再合適不過(guò)了
{ path: ’/actile’, name: ’Actile’, component: Actile, meta: { login_require: false },},{ path: ’/goodslist’, name: ’goodslist’, component: Goodslist, meta: { login_require: true }, children:[ { path: ’online’, component: GoodslistOnline } ]}
這里我們只需要判斷item下面的meta對(duì)象中的login_require是不是true,就可以做一些限制了
router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.meta.login_require })) { next(’/login’) } else next()})
總結(jié)
到此這篇關(guān)于vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼的文章就介紹到這了,更多相關(guān)vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. PHP循環(huán)與分支知識(shí)點(diǎn)梳理2. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)3. 讀大數(shù)據(jù)量的XML文件的讀取問(wèn)題4. 解析原生JS getComputedStyle5. ASP基礎(chǔ)入門(mén)第三篇(ASP腳本基礎(chǔ))6. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)7. ASP實(shí)現(xiàn)加法驗(yàn)證碼8. 前端從瀏覽器的渲染到性能優(yōu)化9. 利用CSS3新特性創(chuàng)建透明邊框三角10. css代碼優(yōu)化的12個(gè)技巧
