解决路由参数变化而组件数据不更新的问题。
描述
使用动态路由时，通过链接跳转，而非刷新时，会出现url改变，而组件不更新的情况，如下：
image
关键
使用watch监听$route变化。
效果
效果图
方法
- 在router中配置动态路由
{
path: '/test/:testId',
name: 'Test',
component: Test
}
- 组件挂载时获取数据
<template>
<div class="wrap">
此时的testId是：{{testId}}
<br/>
<router-link to="/test/bb">跳转到bb</router-link>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
testId: '',
};
},
// 首次加载获取数据
mounted() {
this.testId = this.$route.params.testId;
},
};
</script>
- 使用watch监听路由变化
//监听路由变化，操作数据更新
watch: {
$route(to, from) {
this.testId = this.$route.params.testId;
},
}
