vue中使用动态路由的方式，以及路由不缓存的几种原因。

1.使用v-if动态判断哪些组件需要缓存

a.在App.vue组件中，这是对一级路由进行缓存判断。

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style lang="scss">
</style>

b.在路由配置文件中，定义可被缓存的路由。（设置一级路由）

{
    path: '/',
    redirect: '/home',
    component: () => import('@/views/frame/HomeLayout'),
    meta: { title: '首页', keepAlive: false },
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/frame/Home'),
        meta: { title: '首页', keepAlive: false }
      },
      {
        path: '/work',
        name: 'Work',
        component: () => import('@/views/app/home/Work'),
        meta: { title: '工作', keepAlive: true }
      }
    ]
},
{
    path: '/login',
    name: 'Login',
    component: () => import('@/views/frame/Login'),
    meta: { title: '登录', keepAlive: false }
}

注，本文件中，登录页为一级路由，需要动态缓存的话将keepAlivue属性设置为true，并根据App.vue文件中动态判定逻辑，此路由被缓存。

c.可以看到，路由配置文件中还包括二级路由（children节点下为二级路由的配置）。（设置二级路由），二级路由挂在Homelayout组件下。下文件为Homelayout组件。

<template>
  <div class="app-content">
    <div class="layout-content">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <div class="layout-footer">
      <TabBar :data="tabbars" @change="handleChange" />
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'

export default {
  name: 'AppLayout',
  data() {
    return {
      tabbars: [
        {
          title: '首页',
          to: {
            name: 'Home'
          },
          icon: 'home-o'
        },
        {
          title: '个人中心',
          to: {
            name: 'User'
          },
          icon: 'user-o'
        }
      ]
    }
  },
  components: {
    TabBar
  },
  methods: {
    handleChange(v) {
      console.log('tab value:', v)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-content{
  height: calc(100% - 50px)
}
.layout-content{
  height: 100%
}
</style>

注：可以看到，此组件中，同样做了路由判断，来判断组件是否需要被缓存。

2.此方式动态控制路由缓存方法

在路由跳转时，若要缓存，则加上this.$route.meta.keepAlive = true，即可将跳转后的界面进行缓存，若不缓存即为this.$route.meta.keepAlive = false

this.$router.push(item.path)
this.$route.meta.keepAlive = true

3.另一种控制缓存方式(include好用)

 在全局状态中增加include状态，动态添加或删除即可实现控制缓存 

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

由此，可以引出一个问题，组件缓存不生效的几种可能原因

1. 组件名称没有配置

组件中如果需要缓存，name属性一并要配置并且严格按照组件命名规范。

2.路由文件配置中name属性没有配置，或者与组件name名称不一致。

3.对应路由级别配置错误，如果为二级路由，只在一级组建中配置缓存keep-alive是不行的，还需要在对应的父组件中配置对应的keep-alive。