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