欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年09月04日 09:31:04   作者：谷歌研發(fā)技術(shù)團隊  
這篇文章主要介紹了vue 路由meta 設(shè)置導航隱藏與顯示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

vue 路由meta 設(shè)置title 導航隱藏，具體代碼如下所示：

router.js

routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: "HelloWorld",  要現(xiàn)實的title
        show: true        設(shè)置導航隱藏顯示
      }

    }]

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)，來進行一些操作。用它來做登錄校驗再合適不過了

{
 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è)置導航隱藏與顯示功能的示例代碼的文章就介紹到這了,更多相關(guān)vue 路由meta 設(shè)置導航隱藏與顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論