完美解决$router.go(-1)返回上一层页面不刷新页面问题
在app.vue中改写router-view
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 page1,page2 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 page3 -->
</router-view>
在router/index.js中添加路由元信息,设置需要缓存的页面
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: false, //此组件不需要被缓存
}
},
{
path: '/page1',
name: 'page1',
component: page1,
meta: {
keepAlive: true, //此组件需要被缓存
}
},
{
path: '/page2',
name: 'page2',
component: page2,
meta: {
keepAlive: true, // 此组件需要被缓存
}
},
{
path: '/page3',
name: 'page3',
component: page3,
meta: {
keepAlive: false, // 此组件不需要被缓存
}
}
]