javascript - Vue router inherit parent properties - Stack Overflow

admin管理员组

文章数量:1278978

I'm fairly new to vue.js and I'm currently trying to setup my different routes. I'm using sub routes, since the "logged in" user will have a different UI than a visitor.

Currently my setup is like this:

routes: [
    {
        path: '/auth',
        name: 'auth',
        ponent: test,
        meta: {
            auth: false
        },
        children: [
            {
                path: 'login',
                name: 'login',
                ponent: login
            },
            {
                path: 'signup',
                name: 'signup',
                ponent: signup
            }
        ]
    },

    {
        path: '/user',
        name: 'user',
        ponent: test,
        meta: {
            auth: true
        },
        children: [
            {
                path: 'profile',
                name: 'profile',
                ponent: login
            }
        ]
    }
]

While this is working, I'm wondering why child routes don't take over the parents meta properties. Do I need to assign the meta.auth to each sub route? Or is there any way to inherit this?

Essentially in the router.beforeEach, I want to check if the user is authenticated correctly or not. But only on child routes of /user

I'm also ing from an angular background, so I'm used to nesting routes, not sure if this is the best way in Vue.

I'm fairly new to vue.js and I'm currently trying to setup my different routes. I'm using sub routes, since the "logged in" user will have a different UI than a visitor.

Currently my setup is like this:

routes: [
    {
        path: '/auth',
        name: 'auth',
        ponent: test,
        meta: {
            auth: false
        },
        children: [
            {
                path: 'login',
                name: 'login',
                ponent: login
            },
            {
                path: 'signup',
                name: 'signup',
                ponent: signup
            }
        ]
    },

    {
        path: '/user',
        name: 'user',
        ponent: test,
        meta: {
            auth: true
        },
        children: [
            {
                path: 'profile',
                name: 'profile',
                ponent: login
            }
        ]
    }
]

While this is working, I'm wondering why child routes don't take over the parents meta properties. Do I need to assign the meta.auth to each sub route? Or is there any way to inherit this?

Essentially in the router.beforeEach, I want to check if the user is authenticated correctly or not. But only on child routes of /user

I'm also ing from an angular background, so I'm used to nesting routes, not sure if this is the best way in Vue.

• javascript
• angularjs
• vue.js

Share Improve this question Follow asked Nov 22, 2016 at 5:27 woutr_bewoutr_be 9,7322525 gold badges8282 silver badges130130 bronze badges 2

• Nested routes sure is the right way to divide the page into reasonable parts. For the inheritence, I feel those code above is most probably treated as plain objects, since they're configs, and most frameworks have us declare classes/ponents separately when they want to do inheritence and other pre-process for us. – JJPandari Commented Nov 22, 2016 at 7:16
• @PanJunjie潘俊杰 In angular for example, if you declare a child route, it will inherit the properties from the parent. So I was just wondering how this works in vue. It's not a big deal to declare those properties on each child route, but it would've been easier if i only had to declare them on the parent. – woutr_be Commented Nov 22, 2016 at 7:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

To answer my own question: https://github./vuejs/vue-router/issues/704

I didn't realise this was deprecated in Vue-router 2.0, it is possible to get the matched route and find the meta there.

With vue-router v.3 to match parent's meta (for example: in beforeEach() func. ) You need to use to.matched.some() like this:

router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.auth)) {
    
      // ...
      next({name:'route-name'})
    
  } else {

      next()
  }

}
 

https://router.vuejs/guide/advanced/meta.html

本文标签： javascriptVue router inherit parent propertiesStack Overflow