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

【问题标题】：How to add router with query param to router list?如何将带有查询参数的路由器添加到路由器列表中？
【发布时间】：2021-09-29 11:44:00
【问题描述】：

我想添加一条带有查询参数的路线。
如果网址是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')
    })
  }
}

【问题讨论】：

标签： vue.js nuxt.js vue-router

【解决方案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>

【讨论】：

我不重定向到另一个页面，我想留在当前页面并替换页面的主要组件。
然后，您需要在fetch() 或asyncData() 挂钩内进行相同类型的检查，并使用dynamic component。你能分享你的.vue 组件吗？

【解决方案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
      }
    ]
  })
}

【讨论】：