CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuexvue-router
Ashraful Islam
Ashraful Islam

Reputation: 935

How to get a specific route data by route name in VueJs?

In VueJs i can always access the current route data. but what if i want to access a different route's data by its name ? suppose i have routes defined,

[
    {
        name: "dashboard",
        path: "/",
        component: Dashboard,
        meta: {
            title: "Dashboard",
        }
    },
    {
        name: "login",
        path: "/login",
        component: Login,
        meta: {
            title: "Login",
        }
    }
]

now suppose i am in dashboard route. i can access its data by this.$route but what if i want to access the meta data of route named as login ? is there any function which will return me the object of route named login ?

Upvotes: 4

Views: 4439

Answers (2)

Picard
Picard

Reputation: 4112

You can use the resolve method to translate route name into a path like this:

const { href } = this.$router.resolve({
  name: 'password-change',
});

or if you want more information:

const { route } = this.$router.resolve({
  name: 'password-change',
});

in return you get an object containing route path, meta, params etc.

Upvotes: 6

dreijntjens
dreijntjens

Reputation: 4835

You could access the route using this.$router

this.$router.options.routes[0].meta

Of course you have to grab the correct route

UPDATE

Of course you could iterate over your array:

getRoute: function (routeName) {
  let result = this.$router.options.routes.find(i => i.name === routeName)
  if (result == null) {
    this.$router.options.routes.forEach(element => {
      if (element.children) {
        let route = element.children.find(i => i.name === routeName)
        if (route != null) {
          result = route
        }
      }
    })
  }
  return result
},

Upvotes: 2

Related Questions