如何扩展 nuxt 路由器以添加新页面？答案

【问题标题】：how to extend nuxt router to add new pages?如何扩展 nuxt 路由器以添加新页面？
【发布时间】：2021-07-12 10:10:19
【问题描述】：

我使用的是 Nuxtjs v.2.15.4，我正在尝试一种页面主题化方法。通过这段代码，我可以用我的主题页面覆盖现有页面：

// nuxt.config.js
router: {
  extendRoutes(routes, resolve) {
    if(process.env.THEME === "mainTheme" && process.env.THEME_CUSTOMIZE === "false"){
      return
    }
    routes.map(route => {
      const path = resolve(`src/themes/${process.env.THEME}/${route.chunkName}.vue`)
      if (fs.existsSync(path)) {
        route.component = path
      }
      if(process.env.THEME_CUSTOMIZE === "true"){
        const pathCustom = resolve(`src/themes/customs/${route.chunkName}.vue`)
        if (fs.existsSync(pathCustom)) {
          route.component = pathCustom
        }
      }
      return route
    })
  }
},

我知道我在哪里检查现有路径，如果它不存在，必须推送到路由器。但是什么是可以做命名和其他事情的代码，比如 nuxt 本身？这是nuxt doc提供的推送到路由器的代码：

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      name: 'custom',
      path: '*',
      component: resolve(__dirname, 'pages/404.vue')
    })
  }
}

component 将是 resolve(src/themes/${process.env.THEME}/${route.chunkName}.vue) 就像覆盖代码一样，但是 name 和 path 呢??特别是当页面是动态的！

更新

好的，我认为这种方法有问题。它将检查路线，如果主题文件夹中有相同的路线，它将覆盖。但不会检查主题的页面目录本身是否存在主页面目录中不存在的其他页面！所以我必须如何检查主题的页面目录并通过主题映射并覆盖添加新的主要内容。怎么样！？？

【问题讨论】：

标签： vuejs2 nuxt.js vue-router

【解决方案1】：

好的，我解决了，但它是如此的混乱和丑陋！也增加了构建时间！！

// nuxt.config.js
// using glob: const glob = require("glob");

router: {
  extendRoutes(routes, resolve) {
    if(process.env.THEME === "mainTheme" && process.env.THEME_CUSTOMIZE === "false"){
      return
    }else{
      if(process.env.THEME !== "mainTheme"){
        let themePages = glob.sync(`src/themes/${process.env.THEME}/pages/**/*.vue`)
        routes.map(route => {
          const path = resolve(`src/themes/${process.env.THEME}/${route.chunkName}.vue`)
          if (fs.existsSync(path)) {
            route.component = path
            let regexp = new RegExp(process.env.THEME+'/'+route.chunkName+'.vue');
            themePages.splice(themePages.findIndex((x)=>{return x.match(regexp)}),1)
          }
          return route
        })
        themePages.map((x)=>{
          let str = x.split(process.env.THEME+'/')[1]
          routes.push({
            name: str.replace('pages/','').replace(/\/_|\//gi,'-').replace('.vue',''),
            path: str.replace('pages','').replace(/_(\w+)/gi,':$&?').replace(/:_/gi,':').replace('.vue',''),
            component: resolve(x),
            chunkName: str.replace('.vue','')
          })
        })
      }
      if(process.env.THEME_CUSTOMIZE === "true"){
        let customPages = glob.sync(`src/themes/customs/pages/**/*.vue`)
        routes.map(route => {
          if(process.env.THEME_CUSTOMIZE === "true"){
            const pathCustom = resolve(`src/themes/customs/${route.chunkName}.vue`)
            if (fs.existsSync(pathCustom)) {
              route.component = pathCustom
              let regexp = new RegExp('customs/'+route.chunkName+'.vue');
              customPages.splice(customPages.findIndex((x)=>{return x.match(regexp)}),1)
            }
          }
          return route
        })
        customPages.map((x)=>{
          let str = x.split('customs/')[1]
          routes.push({
            name: str.replace('pages/','').replace(/\/_|\//gi,'-').replace('.vue',''),
            path: str.replace('pages','').replace(/_(\w+)/gi,':$&?').replace(/:_/gi,':').replace('.vue',''),
            component: resolve(x),
            chunkName: str.replace('.vue','')
          })
        })
      }
    }
  }
},

【讨论】：