vue.js 使用routes.js中的路由参数获取组件

sr4lhrrt 于 2022-11-25 发布在 Vue.js

关注(0)|答案(1)|浏览(162)

我希望路由器根据路径中的参数显示组件。
因此，目前我的路线如下所示：

const routes = [
  {
    path: "/pages/1",
    component: () => import("pages/page-1.vue")
  }
]

我希望它们看起来像这样：

const routes = [
  {
    path: "/pages/:page",
    component: () => import("pages/page-{whatgoeshere?}.vue")
  }
]

1条答案

您可以只创建一个页面组件DynamicPage.vue，然后在那里呈现所需的组件。

const routes = [
  {
    path: "/pages/1",
    component: () => import("pages/DynamicPage.vue")
  }
]

动态页面.vue

<template>
  <component :is="`page-${$route.params.page}`" />
</template>

<script>
// Import all page components
</script>