vue 路由meta 設定title 導航隱藏，具體程式碼如下所示：

router.js

routes: [{
      path: '/',name: 'HelloWorld',component: HelloWorld,meta: {
        title: "HelloWorld",要現實的title
        show: true        設定導航隱藏顯示
      }

    }]

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>監聽路由 寫入 title

PS：vue 中路由meta

meta欄位（元資料）

直接在路由配置的時候，給每個路由新增一個自定義的meta物件，在meta物件中可以設定一些狀態，來進行一些操作。用它來做登入校驗再合適不過了

{
 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,next) => {
 if (to.matched.some(function (item) {
  return item.meta.login_require
 })) {
  next('/login')
 } else 
  next()
})

總結

到此這篇關於vue 路由meta 設定導航隱藏與顯示功能的示例程式碼的文章就介紹到這了,更多相關vue 路由meta 設定導航隱藏與顯示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！