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都会被触发。

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

以下是组件代码：

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

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

如果您之前使用的是vue版本，则可以尝试设置＆＃34; canReuse＆＃34;在路由对象中为false？所以：

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

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

这使我在制作搜索页面时解决了这个问题，在该页面中，组件未触发查询更改时的生命周期挂钩。

Answer 2

我在文档中找到了解决方案：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);
    }
  },

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

2 个答案: