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. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問(wèn)題及解決2. python爬蟲(chóng)實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊3. 如何在jsp界面中插入圖片4. 詳解盒子端CSS動(dòng)畫(huà)性能提升5. WML的簡(jiǎn)單例子及編輯、測(cè)試方法第1/2頁(yè)6. 解決ajax請(qǐng)求后臺(tái),有時(shí)收不到返回值的問(wèn)題7. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法8. asp批量添加修改刪除操作示例代碼9. HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)10. .NET6打包部署到Windows Service的全過(guò)程
