时间戳

首页 > 解决方案 > 如何将带有查询参数的路由器添加到路由器列表中？

vue.js - 如何将带有查询参数的路由器添加到路由器列表中？

问题描述

我想添加一个带有查询参数的路由。
如果 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')
    })
  }
}

标签： vue.jsnuxt.jsvue-router

解决方案

这不应该在nuxt.config.js路由器密钥中完成，而是在您的blog.vue页面中直接使用组件路由器保护完成。
下面的代码应该足以检查路由是否有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>

推荐阅读