如果 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);
    }
  },

Answer 2

经过一些研究，我发现 beforeRouteUpdate 挂钩是在 v2.2 中创建的（请参阅文档：https://router.vuejs.org/en/advanced/navigation-guards.html）

如果您使用的是之前的 vue 版本，您可以尝试在路由对象中将 "canReuse" 设置为 false 吗？所以：

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

这应该会强制 vue-router 每次使用不同参数调用路由时重新加载组件。

这为我解决了创建搜索页面时的问题，其中组件在查询更改时未触发其生命周期挂钩。

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

How to get back button to trigger route guard if only parameter in route changes in Vue.js

vue.js

vue-router

vuejs2