nuxt路由动态路由配置

router 路由基础

router会在服务器端和客户端执行。

故对于router中接口axios调用，需做判断

if(process.browser){

  baseURL = "/"

}else{ //node端

baseURL = "http://127.0.0.1:8088/"

}

在Nuxt.js中，默认情况下，路由是根据.vue文件的目录结构自动生成的。  _id.vue 可以生成接收params参数的router

如果不知道 URL 结构的深度，您可以使用_.vue动态匹配嵌套路径( 处理 404 页面符合_.vue页面的逻辑  )

文件结构:

pages/

--| _slug/

-----| comments.vue

-----| index.vue

--| users/

-----| _id.vue

--| _.vue  

--| index.vue

匹配路径：

/  =>  index.vue

/users/123  => users/_id.vue

/about _.vue

/about/careers _.vue

生成的路由表：

router: {   routes: [     {       name: 'index',       path: '/',       component: 'pages/index.vue'     },     {       name: 'users-id',       path: '/users/:id?',  // params参数的router。   route.params.id       component: 'pages/users/_id.vue'     },     {       name: 'slug',       path: '/:slug',  // params参数的router。   route.params.slug       component: 'pages/_slug/index.vue'     },     {       name: 'slug-comments',       path: '/:slug/comments',  // params参数的router。   route.params.slug       component: 'pages/_slug/comments.vue'     }   ]

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

动态生成nuxt路由：

可以通过使用extendRoutes自定义路由配置来禁用默认的路由生成方式，从而实现不根据.vue文件目录结构生成路由。

以下是如何禁用默认路由生成的步骤：

在Nuxt项目的根目录下创建一个nuxt.config.js文件（如果已存在则跳过此步骤）。

在nuxt.config.js文件中添加一个router配置项。如果已存在router配置项，则修改或添加相应的选项。

import { sortRoutes } from '@nuxt/utils' export default {   router: {     // 禁用默认的路由生成     base: '/',     extendRoutes(routes, resolve) {       return [         // 添加你自定义的路由配置 sortRoutes(routes)       ]     }   },   // ... }

上述代码中的extendRoutes选项是一个函数，它可以让你自定义路由配置。你可以在这个函数中添加你所需的路由配置。

nuxt2中只能基于extendRoutes配置路由，会在build编译阶段执行生成路由。不支持在plugin插件中router.push动态添加路由。 nuxt3中支持在plugin中动态添加路由。

export default { //nuxt2 不支持     asyncData({ app, route }) { //$router: 路由操作对象 和  $route: 路由信息对象    app.router.push({ path: '/test', name: 'test', component: () => import('~/pages/test.vue') })   } } export default defineNuxtPlugin(({ $router })=>{ //nuxt3 支持 $router.addRoute({ path: '/test', name: 'test' component: () => import('~/pages/test.vue') }) })