You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.2 KiB
44 lines
1.2 KiB
<script>
|
|
/**
|
|
* 定义一个名为 RouteView 的 Vue 组件
|
|
* 该组件根据路由的 meta 信息和 store 中的 multiTab 状态决定是否缓存路由视图
|
|
*/
|
|
export default {
|
|
// 组件名称
|
|
name: 'RouteView',
|
|
props: {
|
|
// 是否保持缓存，默认值为 true
|
|
keepAlive: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
// 组件数据
|
|
data () {
|
|
return {}
|
|
},
|
|
// 渲染函数
|
|
render () {
|
|
// 解构获取路由的 meta 信息和 store 中的 getters
|
|
const { $route: { meta }, $store: { getters } } = this
|
|
const inKeep = (
|
|
<keep-alive>
|
|
<router-view />
|
|
</keep-alive>
|
|
)
|
|
// 定义不缓存路由视图的组件
|
|
const notKeep = (
|
|
<router-view />
|
|
)
|
|
// 这里增加了 multiTab 的判断，当开启了 multiTab 时
|
|
// 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
|
|
// 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
|
|
if (!getters.multiTab && meta.keepAlive === false) {
|
|
return notKeep
|
|
}
|
|
// 根据 keepAlive 属性、multiTab 状态和路由的 keepAlive 属性决
|
|
return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
|
|
}
|
|
}
|
|
</script>
|