Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Route params are not rendering inside Vue components when using Vue Router

I’ve got Vue router running with these routes:

const routes = [
  {
    path: '/',
    name: 'home',
    params: {
      label: 'Home page'
    },
    component: Home
  },
  {
    path: '/group1',
    name: 'group1',
    params: {
      label: 'Group One'
    },
    redirect: { name: 'subgroup1' },
    children: [
      {
        path: 'subgroup1',
        name: 'subgroup1',
        params: { label: 'Sub Group One' },
        component: SubGroup1,
      },
      {
        path: 'subgroup2',
        name: 'subgroup2',
        params: { label: 'Sub Group Two' },
        component: SubGroup2,
      }
    ]
  }
]

I want to render the label param inside a component, but it isn’t working. Here is an example of my component:

<template>
  <div>
    {{ $route.params.label}}
  </div>
</template>

What am I doing wrong? How do I get this to work?

Tags:

2

Answers


  1. 0

    Accessing such labels cannot be done with the current route but by accessing the entire router itself.

    It can be achieved by using this

    <template>
  <div>
    // pass the index of whatever route you want to access to get the 
    label
    {{ $router.options.routes[0].params.label }}
  </div>
</template>

    I hope this helps.

    Login or Signup to reply.
  2. 0

    meta is intended for route metadata such as labels (hence the name), while params are for route parameters that are passed to a route.

    Should be:

    ...
path: '/',
meta: { label: 'Home page' },
...

    and

    {{ $route.meta.label}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search