VueJS 3 + VueRouter 4 中没有路由名称答案

【问题标题】：No Route name in VueJS 3 + VueRouter 4VueJS 3 + VueRouter 4 中没有路由名称
【发布时间】：2021-12-15 12:47:22
【问题描述】：

我正在使用 VueJS 3 和 Vue Router 4。我想使用 {{$route.name}} 获取当前路由的名称 - 这到目前为止有效。但它不会返回任何路由名称，如果我正在访问一个路由 - 在这个示例中我试图访问 /plans/1 - 它不会返回任何值。这是我的路由数组：

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

我做错了什么？

感谢您的每一个帮助！

【问题讨论】：

标签： vue.js routes vue-router

【解决方案1】：

Vue Router 4.x 为此提供了useRoute()：

import { useRoute } from 'vue-router'

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

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

DEMO

【讨论】：