nuxt配置动态路由

在Nuxt.js中，配置动态路由可以通过使用动态路由参数来实现。动态路由参数是指在路由路径中使用冒号（:）定义的参数，这些参数的值可以根据实际情况进行动态匹配。

下面是配置动态路由的步骤：

1. 在Nuxt.js项目的`pages`目录下创建一个文件夹，用于存放与动态路由相关的页面组件。

2. 在该文件夹下创建一个`.vue`文件，作为动态路由的页面组件。例如，创建一个名为`_id.vue`的文件，其中`id`是动态路由参数的名称。

3. 在`nuxt.config.js`文件中配置动态路由。找到`router`配置项，并添加一个`extendRoutes`属性，用于扩展路由配置。

   export default {
     // ...
     router: {
       extendRoutes(routes, resolve) {
         routes.push({
           name: 'dynamic',
           path: '/dynamic/:id', // 定义动态路由路径
           component: resolve(__dirname, 'pages/dynamic/_id.vue') // 指定对应的页面组件
         })
       }
     }
   }

在上述代码中，我们定义了一个名为`dynamic`的路由，路径为`/dynamic/:id`，并指定了对应的页面组件。

4. 在动态路由的页面组件中，可以通过`this.$route.params`来获取动态路由参数的值。例如，在`_id.vue`文件中可以这样使用：

   <template>
     <div>
       <h1>动态路由页面</h1>
       <p>参数值：{{ $route.params.id }}</p>
     </div>
   </template>

在上述代码中，我们通过`$route.params.id`获取了动态路由参数`id`的值，并在页面中进行展示。

这样，当访问`/dynamic/123`时，就会匹配到动态路由页面组件`_id.vue`，并且可以获取到参数值为`123`。