NUXT实现同级目录下建多个动态路由（路由伪静态）

nuxt实现路由伪静态

1、同一文件夹下新建两个页面文件——PageA.vue/PageB.vue

2、在nuxt.config.js文件router项配置两个页面的动态路由，重启项目

router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          name: "pageA",
          path: "/content/content-:id",
          component: resolve(__dirname, "pages/content/pageA.vue")
        },
        {
          name: "pageB",
          path: "/test/:id",
          component: resolve(__dirname, "pages/test/pageB.vue")
        }
      );
    }
  },

3、配置跳转

<template>
    <div class="container">
        <a @click="$router.push(`/content/content-${'参数id'}.html`)">去到页面A</a>
        <a @click="$router.push(`/test/${'参数id'}`)">去到页面B</a>
    </div>
</template>

4、查看效果

// 跳转的页面的链接
PageA： 127.0.0.1:3100/content/content-:参数id.html 
// 跳转的页面的链接
PageB： 127.0.0.1:3100/test/参数id