Vue用了keep-alive后点击导航不能激活

Question

我的router是这样的

export default new Router({  
  routes: [  
    {  
      path: 'layout',  
      name: 'layout',  
      component: ()=>import('@/components/Layout.vue'),  
      children:[  
        {  
          path:'index',  
          component:()=>import('@/views/index.vue'),  
          name:'index',  
          meta:{  
            keepAlive:true,  
          }  
        },  
        {  
          path:'push',  
          component:()=>import('@/views/push.vue'),  
          name:'push'  
  },  
        {  
          path:'mine',  
          component:()=>import('@/views/mine.vue'),  
          name:'mine'  
  }  
      ]  
    }
  
  ]  
})

• App.vue

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

• Layout.vue

<template>  
  <div class="layout">  
    <router-view/>  
    <van-tabbar v-model="active" @change="onChange">  
      <van-tabbar-item name="index" icon="home-o">首页</van-tabbar-item>  
      <van-tabbar-item name="push" icon="plus">发布</van-tabbar-item>  
      <van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>  
    </van-tabbar>  
  </div>  
</template>
<script>  
  export default{  
    data(){  
      return{  
        active:'index',  
  
      }  
    },  
    created(){  
      let names=this.$route.path.split('/');  
      this.active=names[names.length-1];  
    },  
    methods:{  
      onChange(index){  
          this.$router.push({path:'/layout/'+index,query:this.$route.query});  
      }  
    }  
  }  
</script>

我在首页配置了keep-alive后，先点击我的，再点击首页，页面虽然回到首页了但底部的导航Tabber不会被激活
再次点击首页会报错

vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/layout/index") is not allowed", stack: "Error↵    at new NavigationDuplicated (webpack-int…al:///./node_modules/vue/dist/vue.esm.js:2187:14)"}

---

猜测可能是因为加上keep-alive不会触发create，导致我的导航不能激活，有没有不用create激活导航的办法？
不加created也不行
不加created情况下，不加keep-alive导航能正常激活，加keep-alive导航不能正常激活

Answer 1

没有很懂你的问题是什么，但是我觉得有几个地方你可能需要再去看看官方文档：

1.keep-alive作用是缓存子组件，create第二次进来的时候肯定不会触发的

当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

2.v-if="$route.meta.keepAlive"这个是否可以用keep-alive的include与exclude代替？

include- 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。