常见的需求:
列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载,且保留原来浏览的位置)。
1.实现页面的不重新加载
使用vue的keep-alive
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,也就是所谓的第一次进入页面加载,返回等第二次进入页面不加载
app.vue:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
router-view表示的是引用的页面(也可以是组件我们这里指的是页面),$route.meta.keepAlive
表示的是当前页面的meta
的keepAlive
属性是否为true,只有该属性为true时,我们才采用keep-alive
的形式
可以直接在router.js中设置meta
这里是简化版:
{
path: '/detail',
component: detail
},
{
path: '/list',
component: list,
// 设置meta
meta