No Route name in VueJS 3 + VueRouter 4

user_16571281 0
Viewed 128

I am using VueJS 3 and Vue Router 4. I want to get the name of the current route using {{$route.name}} - this works so far. But it doesn't return any Route Name, if I'm accessing a route - in this Example I am trying to access /plans/1 - it doesn't return any value. here is my routes-array from the router:

const routes = [
    {
        path: '/plans',
        name: 'Learning Plans',
        component: ListPlans
    },
    {
        path: '/plans/:id',
        name: "Leaning Plan: Learn",
        component: ViewPlan,
        props: true
    },
    {
        path: '/plans/:id/edit',
        name: "Edit Learningplan",
        component: EditPlan,
        props: true
    }
]

What am I doing wrong?

Thanks for every help!

vue-router vue.js routes
1 Answers

Vue Router 4.x provides useRoute() for that:

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    onMounted(() => {
      const id = route.params.id
    })
  }
}

DEMO

user_26893250
Related