javascript - 仅当 URL 中的参数更改时重新加载页面

Question

我有一个小问题，但我无法解决它。

我在这个页面上:

http://example.com:8080/#/user/5ad142e8063ebb0537c5343e

我有一个指向此 URL 的链接

http://example.com:8080/#/user/5ac00b02bb055f37b3fd2d07

但是当我点击链接时。 URL 发生变化，但内容不变。内容不会重新加载。如果我手动重新加载页面，它就可以工作。

链接代码是:

<router-link  :to="{ name: 'User', params: { id: user.id }}">
        <span class="glyphicon glyphicon-cog"></span> Profil
</router-link>

有没有办法强制页面重新加载？

Answer 1

这是由于dynamic route matching 。该组件必须对 url 参数的更改使用react:

One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.

有两种方法可以处理这个问题，观察 $route 对象:

const User = {
     template: '...',
     watch: {
         '$route' (to, from) {
              // react to route changes...
          }
     }
}

或者通过beforeRouteUpdate守卫:

const User = {
    template: '...',
    beforeRouteUpdate (to, from, next) { 
        // react to route changes... 
        // don't forget to call next() 
    } 
}