如果Vue.js中只有路由中的参数发生变化，如何让返回按钮触发路由保护

Question

我有以下路线：

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

如果我浏览到此路由，则所有路由器防护和组件挂钩都会正常触发，例如

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

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

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

下面是组件代码：

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');
    }
}

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

Answer 1

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

所以我只需将以下内容添加到我的控制器中：

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