Question

我有一点问题，但我无法修复它。

我在这个页面上：

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

我有一个指向此网址的链接

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参数的更改做出反应：

使用带有params的路由时要注意的一点是，当用户从/ user / foo导航到/ user / bar时，将重用相同的组件实例。由于两个路由都呈现相同的组件，因此这比销毁旧实例然后创建新实例更有效。 但是，这也意味着不会调用组件的生命周期挂钩。

有两种方法可以处理此问题，请观看$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() 
    } 
}

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

1 个答案: