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

Question

I'm trying to define a beforeEnter guard for my children routes, but I'm having no success. Here's my routes configuration:

  ...
  {
    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
      },
     ...
    ]
  }
  ...

Everything works fine when I refresh the page or insert the url directly on the browser (for example: base_path/path2). But when I click on router-links that redirects to path1 or path2, the beforeEnter guard does not execute.

Did I understand anything wrong? Do I need to set a beforeEnter guard for each of the children?

Answer 1

The best solution I found was to use beforeEach guard instead of beforeEnter.

beforeEnter is a per route guard, and then it was being applied only for the parent route, but not for the children.