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') })
})