vue 同一路由多次触发不刷新页面的问题

为什么会出现这个问题： 使用带有参数的路由时，相同的组件实例将被重复使用。如用户从 /user/1 跳转到 /user/2，因为两个路由都渲染同个组件，为了更加高效，会复用此组件，而不是销毁再创建。

解决办法

1. 使用 watch监听 $route 对象上的属性变化

watch: {
    $route() {
        // 对路由变化做出响应...
    }
    // 或者当$route改变时，就调用某个方法
    $route: '方法'
}

2. 使用 beforeRouteUpdate导航守卫

beforeRouteUpdate(to,from) {
    // 对路由变化做出响应
}

如果需要在进入路由时就做出响应，使用beforeRouteEnter，但它不能访问组件实例 this

解决办法：传入第三个参数next

beforeRouteEnter(to,from,next) {
    ...
    /**
     *next(em => {
     *   // em相当于created()里的`this`
     *   console.log(em.name)
     *   em.方法名()
     *})
     */
    // 例：通过进入的路由的id请求数据
    getData(to.params.id).then(res => {
        next(em => {
            vm.data = res.data;
        })
    })
}

3. 给不希望被复用的组件添加 :key="xxx" ,当key不同时,组件会被替换(也可以给html标签添加)
4. 因为我的<router-view>被<keep-alive>包裹，所以我设置<keep-alive exclude="组件名">，让<keep-alive>不包含 我不希望被复用的组件。 (<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。)