vue 路由元信息meta属性应用

用keep-alive通常缓存组件会这样做：

<keep-alive>
    <router-view></router-view>
</keep-alive>

如果想单独缓存哪一些组件需要这样：

<keep-alive>
    <component-A></component-A>
    <component-B></component-B>
</keep-alive>

上边的方法显然不是最优的，如果有100个组件，90个组件需要缓存，你还要写挨个写吗？

我们可以在每个路由对象meta中添加一个状态，使用$route.meta.xxx来获取这个状态，使用v-show判断组件是否被缓存：

<template>
  <div id="app">
      <keep-alive v-if="$route.meta.isKeepAlive">
        <router-view/>
      </keep-alive>

      <keep-alive v-if="!$route.meta.isKeepAlive">
        <router-view/>
      </keep-alive>
  </div>
</template>

在路由中的配置：

const router = new VueRouter({
    routes:[
        {
            path:'/',
            name:'home',
            component:home,
            meta:{isKeepAlive:true}
        },
        {
            path:'/news',
            name:'news',
            component:news,
            meta:{isKeepAlive:true}
        },
        {
            path:'/play',
            component:play,
            meta:{isKeepAlive:false}
        },
    ]
})

2、利用元信息 动态显示 网页标题

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routers = [
    {
        path: '/',
        component: First,
        meta: {
            name: 'first'
        }
    },
    {
        path: '/sec',
        // redirect: '/',
        component: sec,
        meta: {
            name: 'second'
        }
    }
]
const router = new VueRouter({
    routes: routers
})
router.beforeEach((from, to , next) => {
    if(to.meta.name) {
        document.title = to.meta.name
    }else {
        document.title = '默认'
    }
    next()
})
export default router