vue监听动态路由

解决路由参数变化而组件数据不更新的问题。

描述

使用动态路由时，通过链接跳转，而非刷新时，会出现url改变，而组件不更新的情况，如下：

image

关键

使用watch监听$route变化。

效果

效果图

方法

1. 在router中配置动态路由

{
    path: '/test/:testId',
    name: 'Test',
    component: Test
}

2. 组件挂载时获取数据

3. 使用watch监听路由变化

//监听路由变化，操作数据更新
watch: {
    $route(to, from) {
        this.testId = this.$route.params.testId;
    },
}