如何在Vue路由中通过路由参数动态加载对应组件？

直接修改路由配置，利用路由的动态导入函数获取路径参数，拼接组件路径即可：

const routes = [
  {
    path: "/pages/:page",
    // 通过to参数拿到路径里的page值，拼接组件路径
    component: (to) => import(`pages/page-${to.params.page}.vue`)
  }
]

注意事项： #

• 必须确保对应路径下存在目标组件文件，比如访问/pages/2时，pages/page-2.vue得真实存在，不然会触发加载错误
• 可以加路由守卫做参数校验，避免非法参数导致的组件加载失败，比如限制page只能是数字：

  const routes = [
    {
      path: "/pages/:page",
      component: (to) => import(`pages/page-${to.params.page}.vue`),
      beforeEnter: (to) => {
        // 校验page参数是否为数字
        if (!/^\d+$/.test(to.params.page)) {
          return { path: "/404" } // 非法参数跳转到404页面
        }
      }
    }
  ]
  

• Vue 2 + Vue Router 3、Vue 3 + Vue Router 4都支持这种写法，无需额外配置

内容的提问来源于stack exchange，提问作者daveyb