The role of meta in vue-router and description

The role of meta in vue-router

Definition of meta：

Simply put, it is router meta information, that is, the information carried by each router.

The role of meta：

To put it bluntly, vue-router routing meta information is to judge whether the current route needs further processing through some properties in the meta object. If it needs to be processed, process it according to the desired effect.

When defining routes, you can configure the meta field:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

So how do you access this meta field?

First, we call each route object in the routes configuration a route record. The routing record can be nested, so when a route matches successfully, it may match multiple routing records.

For example, according to the above routing configuration, the URL /foo/bar will match the parent route record and the child route record.

All routing records matched by a route are exposed as $arrays of $route objects (and route objects in the navigation guard). Therefore, we need to iterate over $ to check the meta field in the routing record.

The following example shows checking metafields in the global navigation guard:

((to, from, next) => {
  if ((record => )) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!()) {
      next({
        path: '/login',
        query: { redirect:  }
      })
    } else {
      next()
    }
  } else {
    next() // Make sure to call next()  }
})

The wonderful use of meta information meta in vue-router

{
    path:"/test",
    name:"test",
    component:()=>import("@/components/test"),
    meta:{
        title:"Test Page", //Configure title        keepAlive: true //Whether to cache    }
}

Configure the title of this route

// Code in((to,from,next)=>{
    if(){
        =
    }
    next()
})

Configure whether the component needs to be cached

<!-- Code in -->
<!-- The route entry that needs to be cached -->
<keep-alive>  
    <router-view v-if="$"></router-view>
</keep-alive>
<!-- 不The route entry that needs to be cached -->
<router-view v-if="!$"></router-view>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.