Question

我想知道如何停止在Vue-router中重用组件。

我正在构建一个简单的页面应用程序，两次单击相同的链接后，我无法更新数据。

是否可能以某种方式强制重新加载，或者在我的情况下最佳做法是什么？

Answer 1

执行此操作的一种方法是将密钥放在router-view上，并将时间戳查询字符串附加到router-link

const Home = {
    template: '<div>Home</div>',
    created() {
        console.log('This should log everytime you click home.');
    },
};

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: Home },
    ]
});

new Vue({
    router,
    el: '#app',
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app">
  <router-link :to="`/?q=${Date.now()}`">/home</router-link>
  <router-view :key="$route.fullPath"></router-view>
</div>

不这样做的一个原因是，它会迫使您重新使用可能重用的组件，例如

之类的路线。

/posts/1
/posts/2

Answer 2

使用key上的router-view属性设置为当前网址。它是内置的，因此无需编写任何代码。

<router-view :key="$route.fullPath"></router-view>

Answer 3

Vue路由器重复使用相同的组件，因此不会调用已安装的挂钩。如文档中所述：

同一组件实例将被重用[...]组件的生命周期挂钩将不会被调用。

如果要更新数据，则有两个选择：

观看$ 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()
  }
}

有关详细说明，您可以查看Vue Router文档的“对参数更改做出反应”一节：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes。

Vue-Router组件重用

3 个答案: