vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼
更新時間：2020年09月04日 09:31:04 作者：谷歌研發(fā)技術(shù)團(tuán)隊(duì)
這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
vue 路由meta 設(shè)置title 導(dǎo)航隱藏，具體代碼如下所示：
router.js
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
title: "HelloWorld", 要現(xiàn)實(shí)的title
show: 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)聽路由 寫入 title
PS：vue 中路由meta
meta字段（元數(shù)據(jù)）
直接在路由配置的時候，給每個路由添加一個自定義的meta對象，在meta對象中可以設(shè)置一些狀態(tài)，來進(jìn)行一些操作。用它來做登錄校驗(yàn)再合適不過了
{
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對象中的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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本文主要介紹了vue動態(tài)修改頁面title的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
本文會通過一個簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
如何解決d3.event在v7版本無效影響zoom拖拽縮放問題
這篇文章主要介紹了如何解決d3.event在v7版本無效影響zoom拖拽縮放問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
插槽（Slot）是Vue.js中一個非常重要的概念,它極大地提高了組件的復(fù)用性和靈活性,通過插槽,我們可以自定義組件的內(nèi)容,使其能夠適應(yīng)不同的場景,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue中插槽的基本用法、類型以及高級技巧,需要的朋友可以參考下2024-11-11
在?Vue?項(xiàng)目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導(dǎo)入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項(xiàng)目中的圖片資源2024-09-09
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進(jìn)行了優(yōu)化，下面我們一起進(jìn)入文章看看具體詳情吧2021-10-10
詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue請求函數(shù)和路由的安裝使用過程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08