Vue-Router监听路径参数变化

假如我们有多个路由地址，如下：

# 其中，100 和 200 是用户ID
/user/100
/user/200

上面的路由地址均被 User.vue 组件进行渲染。当我们的路由路径参数由100变为200的时候，我们需要作出相应的动作。

vue广告位

当使用路由参数时，例如从 /user/100 导航到 /user/200，原来的组件实例会被复用。因为两个路由都渲染同个组件User，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

<template>
    <div class="user">
        <h2>User Page</h2>
        <p>id = {{ this.$route.params.id }}</p>
    </div>
</template>

<script>
export default {
    name: "User",
    watch: {
        '$route'(to, from) {
            // 对路由变化作出响应
            console.debug(to)
        }
    }
}
</script>

<style scoped>

</style>

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

<template>
    <div class="user">
        <h2>User Page</h2>
        <p>id = {{ this.$route.params.id }}</p>
    </div>
</template>

<script>
export default {
    name: "User",
    beforeRouteUpdate: function(to, from, next){
        // 对路由的变化作出响应
        // 不要忘记调用next()函数
        console.debug("路由参数变化了...")
        // 如果忘记了调用next()方法，则组件视图不会被渲染（不可见）
        next()
    }
}
</script>

<style scoped></style>

总结：

本文介绍了怎样去监听路由参数的变化，可以通过两种方式，分别为：

• 使用 watch 监听 $route 对象

• 使用 beforeRouteUpdate 钩子函数