vue监听动态路由

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

描述

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

image

关键

使用watch监听$route变化。

效果

效果图

方法

1. 在router中配置动态路由

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

2. 组件挂载时获取数据

<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>

3. 使用watch监听路由变化

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