Vue router-view key属性解释
Vue router-view key属性解释
Vue router-view key 属性解释
router-view
作用,你可以把router-view
当做是一个容器,它渲染的组件是你使用vue-router
指定的。
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" /> //key属性
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.fullPath
}
}
}
</script>
这里router-view
有一个key
的属性,这个key
的属性作用是:
-
不设置
router-view
的key
属性由于
Vue
会复用相同组件,即/page/a => /page/b
或者/page?id=a => /page?id=b
这类链接跳转时,将不再执行created
,mounted
之类的钩子,这时候你需要在路由组件中,添加beforeRouteUpdate
钩子来执行相关方法拉取数据相关钩子加载顺序为:
beforeRouteUpdate
-
设置
router-view
的key
属性值为$route.path
从
/page/a => /page/b
,由于这两个路由的$route.path
并不一样,所以组件被强制不复用,相关钩子加载顺序为beforeRouteUpdate => created => mounted
从
/page?id=a => /page?id=b
,由于这两个路由的$route.path
一样,所以和没设置key
属性一样,会复用组件,相关钩子加载顺序为:beforeRouteUpdate
-
设置
router-view
的key
属性值为$route.fullPath
从
/page/a => /page/a
,由于这两个路由的$route.fullPath
并不一样,所以组件被强制不复用,相关钩子加载顺序为beforeRouteUpdate => created => mounted
-
从
/page?id=a => /page?id=b
,由于这两个路由的$route.fullPath
并不一样,所以组件被强制不复用,相关钩子加载顺序为beforeRouteUpdate => created => mounted
更多推荐
所有评论(0)