如何通过Vue Router匹配带指定Query参数的嵌套组件？

你遇到的问题其实是对Vue Router路由配置里的query属性理解有误——这个属性不是用来做路由匹配条件的，它的作用是当你主动导航到这个路由时，自动给URL添加对应的query参数，所以不管你URL里的type是1还是225，都会匹配到Bar组件。

要实现只匹配type=225的情况，你可以用路由守卫来做参数校验，下面是具体的实现方案：

方案一：使用子路由的beforeEnter守卫 #

这是最直接的方式，在进入子路由前校验query参数：

const Foo = { template: '<div>Foo<router-view></router-view></div>' }
const Bar = { template: '<div>Bar</div>' }
// 可以准备一个不匹配时显示的组件（可选）
const NoMatch = { template: '<div>参数不匹配，请检查</div>' }

const router = new VueRouter({ 
  mode: 'history', 
  routes: [ 
    { 
      path: '/foo', 
      component: Foo, 
      children: [ 
        { 
          path: '', 
          component: Bar, 
          beforeEnter: (to, from, next) => {
            // 严格校验type是否等于'225'
            if (to.query.type === '225') {
              next(); // 符合条件，允许进入Bar组件
            } else {
              // 不符合条件的情况，你可以选择：
              // 1. 取消导航：next(false)
              // 2. 跳转到其他路由：next('/foo/no-match')
              // 3. 重定向到符合条件的URL：next({ path: '/foo', query: { type: '225' } })
              next({ component: NoMatch }); // 或者直接渲染不匹配组件
            }
          }
        },
        // 如果需要单独的不匹配路由，也可以加这个
        { path: 'no-match', component: NoMatch }
      ] 
    } 
  ] 
})

方案二：在父组件内根据Query参数切换子组件 #

如果不需要严格的路由匹配规则，只是想在type=225时显示Bar组件，也可以直接在父组件Foo里通过$route.query来控制渲染：

<template>
  <div>Foo
    <!-- 只有当type等于225时才渲染Bar -->
    <Bar v-if="$route.query.type === '225'" />
    <!-- 其他情况显示默认内容或其他组件 -->
    <div v-else>请传入正确的type参数</div>
  </div>
</template>

<script>
import Bar from './Bar.vue'

export default {
  components: { Bar }
}
</script>

这种方式不需要嵌套路由，更适合简单的场景。

总结一下：Vue Router的路由配置中，path用来匹配URL路径部分，而query参数的匹配需要通过路由守卫或组件内的条件渲染来实现，不能直接在路由配置里指定query作为匹配规则。

内容的提问来源于stack exchange，提问作者rac