vue.js - 如果 Vue.js 中仅更改路由中的参数，如何返回按钮以触发路由保护

Question

我有以下路线:

{ name: 'items', path: 'items/:id', component: () => import('pages/Childitems'), props: true}

如果我浏览到这个路由，那么所有的路由守卫和组件钩子(Hook)都会被正常触发，例如

http://localhost:8081/items/1
http://localhost:8081/items/57
http://localhost:8081/items/58

上面的地址序列工作正常 - 所有预期的路由器 Hook ，例如 beforeUpdate 和 updated 都会被触发。

但是，如果我使用浏览器的后退和前进按钮访问这些 URL，则不会触发这些 Hook 。

组件代码如下:

export default {
    name: 'items',
    created: function() {
        console.log('items/:id hook – created');
    },
    beforeMount () {
        console.log('items/:id hook beforeMount');
    },
    mounted () {
        console.log('items/:id hook mounted');
    },
    beforeUpdate () {
        console.log('items/:id hook beforeUpdate');
    },
    updated () {
        console.log('items/:id hook updated');
    },
    activated () {
        console.log('items/:id hook activated');
    },
    beforeDestroy () {
        console.log('items/:id hook beforeDestroy');
    },
    destroyed () {
        console.log('items/:id hook destroyed');
    },
    beforeRouteEnter (to, from, next) {
        console.log('update items beforeRouteUpdate');
    },
    beforeRouteUpdate (to, from, next) {
        console.log('update items beforeRouteUpdate');
    },
    beforeRouteLeave (to, from, next) {
        console.log('update items beforeRouteUpdate');
    }
}

我怎样才能让他们触发？或者我可以为前进和后退按钮使用什么钩子(Hook)？

Answer 1

我在文档中找到了解决方案:https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes

所以我只需将以下内容添加到我的 Controller 中:

  watch: {
    '$route' (to, from) {
      // react to route changes...
      console.log('route parameter changed');
      console.log(to.params.id);
      console.log(from.params.id);
    }
  },