如何将带有查询参数的路由器添加到路由器列表？

Question

我想添加带有查询参数的路由。
如果 url 是 blog，则导航到索引页。
如果 url 包含 author 查询参数，则将页面上的组件替换为 BlogAuthorPage 组件。

router: {
  extendsRoutes(routes, resolve) {
    routes.push({
      name: 'author-page-detail',
      path: '/blog?author=*',
      component: resolve(__dirname, 'pages/blog/author-page.vue')
    })
  }
}

Answer 1

这不应该在 nuxt.config.js 的路由器密钥中完成，而应该在您的 blog.vue 页面中直接使用 component router guard.
下面的代码应该足以检查路由是否有 author 查询参数并重定向到 blog/author-page 页面。

<script>
export default {
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$route.query?.author) next({ name: 'blog-author-page' })
      else next()
    })
  },
}
</script>

Answer 2

我用"@nuxtjs/router": "^1.6.1",

nuxt.config.js

  /*
  ** @nuxtjs/router module config
  */
  routerModule: {
    keepDefaultRouter: true,
    parsePages: true
  }

router.js

import Vue from 'vue'
import Router from 'vue-router'

import BlogIndexPage from '~/pages/blog/index'
import BlogAuthorPage from '~/pages/blog/author-page';

Vue.use(Router);

export function createRouter(ssrContext, createDefaultRouter, routerOptions, config) {
  const options = routerOptions ? routerOptions : createDefaultRouter(ssrContext, config).options

  return new Router({
    ...options,
    routes: [
      ...options.routes,
      {
        path: '/blog',
        component: ssrContext.req.url.includes('/blog?author') ? BlogAuthorPage : BlogIndexPage
      }
    ]
  })
}

如何将带有查询参数的路由器添加到路由器列表？

How to add router with query param to router list?

vue.js

vue-router

nuxt.js