Vue 路由器在关闭嵌套路由时更新父组件

Question

我有以下用例：

访问 /parent 页面并呈现父组件
访问/parent/john并渲染子组件
导航回/parent子组件被销毁

此时我需要更新父组件。我有以下 routes.js:

{
  path: '/parent',
  name: 'parent',
  component: Parent,
  beforeEnter: (to, from, next) => {
    console.log(to, from);
    next();
  },
  children: [
    {
      path: ':child',
      component: Child
    },
  ]
},

自从 beforeEnter 第一次渲染组件后 是否有任何其他方法可以知道路由已更新并触发父组件上的方法？

Answer 1

我认为 reacting-to-params-changes 可能会有帮助。

基本上，在注册 vue-router 之后，所有组件都会有 '$router' 和 '$route' 属性。

component.$router 可用于绑定侦听器并以编程方式更改当前路由。

component.$route 保存了当前路由的信息。

因此，一种替代方法是观察“$route”属性。

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

Vue 路由器在关闭嵌套路由时更新父组件

Vue router update parent component on closing nested routes

javascript

vue.js

vue-router