如何在 Vue Router 文件中使用 URL 参数和查询答案

【问题标题】：How to use URL parameters and queries in Vue Router file如何在 Vue Router 文件中使用 URL 参数和查询
【发布时间】：2022-12-13 00:38:54
【问题描述】：

我想在 vue 路由器定义文件中使用 URL 参数和查询，以便动态设置标题名称。

我尝试使用 $route.params.paramName 格式：

const routes = [
 {
    path: '/rooms/:room/:id?',
    name: `${$route.params.room}`,
    component: RoomsView,
    meta:{
      title: `${$route.params.room} ${$route.params.id} - WebsiteName`
    }
  }
]

你知道我如何访问这些值吗？

【问题讨论】：

标签： vuejs3 vue-router url-parameters

【解决方案1】：

我认为最好让组件本身用类似的东西呈现逻辑

computed: {
 title() {
  const { name, id } = this.$route.params; 
  return `${name} ${id} - WebsiteName`;
 }
}

我认为 docs 也会给你一些有用的见解

【讨论】：