javascriptvue.jsvue-router

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?


Solution

  • 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}}