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

Question

我正在使用 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 文档提供的用于推送到路由器的代码：

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 呢？特别是当页面是动态的时候！！

更新

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

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

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

how to extend nuxt router to add new pages?

vue-router

vuejs2

nuxt.js