Vue-router: beforeEnter guard 对于 children 路径不能正常工作

Question

我正在尝试为我的 children 路线定义一个 beforeEnter 守卫，但我没有成功。这是我的路线配置：

  ...
  {
    path: '/',
    component: App
    beforeEnter: (to, from, next) ->
       # This block is only reached when I refresh the page

    children: [
      {
        name: 'component1',
        path: '/component1',
        components: component1
      },
      {
        name: 'path2',
        path: '/path2',
        components: component2
      },
     ...
    ]
  }
  ...

当我刷新页面或直接在浏览器上插入 url 时一切正常（例如：base_path/path2）。但是，当我单击重定向到 path1 或 path2 的 router-links 时，beforeEnter 守卫不会执行。

我是不是理解错了什么？我是否需要为每个 children 设置一个 beforeEnter 守卫？

Answer 1

尝试添加beforeRouteUpdate hook，即

...
{
path: '/',
component: App
beforeEnter: (to, from, next) ->
   # This block is only reached when I refresh the page
beforeRouteUpdate: (to, from, next) ->
   # This will called when you use router-links
children: [
  {
    name: 'component1',
    path: '/component1',
    components: component1
  },
  {
    name: 'path2',
    path: '/path2',
    components: component2
  },
 ...
]
}
...

Answer 2

我找到的最佳解决方案是使用 beforeEach guard 而不是 beforeEnter。

beforeEnter 是一个 per route guard，然后它只应用于父路由，但不应用于子路由。

Answer 3

@strelok2010，beforeRouteUpdate是组件的hook。

Vue-router: beforeEnter guard 对于 children 路径不能正常工作

Vue-router: beforeEnter guard doesn’t work properly for children path

vue.js

vue-router

vue-component

vuejs2