vue Route meta Settings Navigation Hide and Show Function Sample Code

vue routing meta sets title navigation hiding, as follows:

router.js

routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: "HelloWorld",   Be realistic title
        show: true         Set navigation hidden display 
      }

    }]

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <bottom v-show="this.$route.meta.show"></bottom>  this.$route.meta.show  Show or hide 
  </div> 
</template>

main.js

router.beforeEach((to, from, next) => {
 
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})<br><br> Listening route   Write  title

PS: Routing meta in vue

meta Field (Metadata)

When configuring routes directly, add a custom meta object to each route, and set 1 state in meta object to perform 1 operation. It is perfect for login verification

{
 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
  }
 ]
}

Here, we only need to judge whether login_require in meta object under item is true, and then we can do some restrictions

router.beforeEach((to, from, next) => {
 if (to.matched.some(function (item) {
  return item.meta.login_require
 })) {
  next('/login')
 } else 
  next()
})

Summarize