vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼

更新時(shí)間：2020年09月04日 09:31:04 作者：谷歌研發(fā)技術(shù)團(tuán)隊(duì)

這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(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ù)）

直接在路由配置的時(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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue動(dòng)態(tài)修改頁(yè)面title的兩種方法
本文主要介紹了vue動(dòng)態(tài)修改頁(yè)面title的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
Vue父子組件元素獲取方法互相調(diào)用示例詳解
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
Vue.js 插件開發(fā)詳解
本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的vue-toast插件，來(lái)幫助了解掌握插件的開發(fā)和使用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03
如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題
這篇文章主要介紹了如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中插槽slot的用法詳解
插槽（Slot）是Vue.js中一個(gè)非常重要的概念,它極大地提高了組件的復(fù)用性和靈活性,通過(guò)插槽,我們可以自定義組件的內(nèi)容,使其能夠適應(yīng)不同的場(chǎng)景,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue中插槽的基本用法、類型以及高級(jí)技巧,需要的朋友可以參考下
2024-11-11
在?Vue?項(xiàng)目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對(duì)路徑或通過(guò)@別名引用圖片,在CSS中,通過(guò)相對(duì)路徑或@別名引用圖片作為背景,在JavaScript中,通過(guò)import語(yǔ)句導(dǎo)入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項(xiàng)目中的圖片資源
2024-09-09
淺談Vue3的幾個(gè)優(yōu)勢(shì)
這篇文章主要給大家分享的是Vue3的幾個(gè)優(yōu)勢(shì)，Vue3仍然在源碼、性能和語(yǔ)法 API 三個(gè)大的方面進(jìn)行了優(yōu)化，下面我們一起進(jìn)入文章看看具體詳情吧
2021-10-10
詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程
這篇文章主要介紹了vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-08-08