Vue 2.x中vue-router默认子路由配置问题咨询

我来帮你搞定这个三级菜单的路由匹配和默认子路由问题，刚好之前做过类似的场景，下面给你一步步拆解实现方案：

核心思路 #

我们需要利用vue-router的嵌套路由特性，给每个主菜单路由配置对应的子路由，同时设置一个默认子路由（path为空字符串），这样当用户访问主菜单路径（比如/voice1）时，会自动加载第一个子菜单对应的内容组件；而访问具体子菜单路径（比如/voice1/submenu1）时，直接渲染对应内容。

1. 路由配置示例 #

在你的router/index.js里，按照三级结构配置嵌套路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入你的组件
import Voice1 from '@/views/Voice1.vue'
import Voice1Submenu1 from '@/views/voice1/Submenu1.vue'
import Voice1Submenu2 from '@/views/voice1/Submenu2.vue'
import Voice1Submenu3 from '@/views/voice1/Submenu3.vue'
// 其他voice2、voice3的组件同理导入

Vue.use(VueRouter)

const routes = [
  {
    path: '/voice1',
    component: Voice1, // 主菜单对应的父组件，用来承载子菜单和内容区域
    children: [
      // 默认子路由：访问/voice1时自动匹配这个路由
      {
        path: '',
        redirect: 'submenu1' // 重定向到第一个子菜单，也可以直接写component: Voice1Submenu1
      },
      {
        path: 'submenu1',
        component: Voice1Submenu1,
        name: 'Voice1Submenu1'
      },
      {
        path: 'submenu2',
        component: Voice1Submenu2,
        name: 'Voice1Submenu2'
      },
      {
        path: 'submenu3',
        component: Voice1Submenu3,
        name: 'Voice1Submenu3'
      }
    ]
  },
  // 同理配置voice2、voice3的路由
  {
    path: '/voice2',
    component: Voice2,
    children: [
      { path: '', redirect: 'submenu1' },
      { path: 'submenu1', component: Voice2Submenu1 },
      // ...其他子菜单路由
    ]
  },
  {
    path: '/voice3',
    component: Voice3,
    children: [
      { path: '', redirect: 'submenu1' },
      { path: 'submenu1', component: Voice3Submenu1 },
      // ...其他子菜单路由
    ]
  },
  // 根路径重定向到第一个主菜单
  {
    path: '/',
    redirect: '/voice1'
  }
]

const router = new VueRouter({
  mode: 'history', // 可选，根据你的需求选择hash或history模式
  routes
})

export default router

2. 主菜单组件（比如Voice1.vue）的模板结构 #

这个组件需要包含子菜单区域和内容展示区域，用<router-view>来渲染子路由对应的内容组件：

<template>
  <div class="voice-container">
    <!-- 子菜单区域 -->
    <div class="submenu-bar">
      <router-link to="/voice1/submenu1" active-class="active">submenu 1</router-link>
      <router-link to="/voice1/submenu2" active-class="active">submenu 2</router-link>
      <router-link to="/voice1/submenu3" active-class="active">submenu 3</router-link>
    </div>
    <!-- 内容展示区域：渲染子路由对应的组件 -->
    <div class="content-area">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.submenu-bar {
  margin-bottom: 20px;
}
.submenu-bar a {
  margin-right: 15px;
  text-decoration: none;
}
.submenu-bar a.active {
  color: #42b983;
  font-weight: bold;
  border-bottom: 2px solid #42b983;
}
</style>

3. 直接渲染子组件的场景处理 #

如果在某些场景下你不需要通过路由跳转，而是要直接渲染子内容组件，可以通过动态组件结合状态来实现：

<template>
  <div>
    <!-- 手动选择子菜单 -->
    <button @click="selectedSubmenu = 'submenu1'" :class="{active: selectedSubmenu === 'submenu1'}">submenu 1</button>
    <button @click="selectedSubmenu = 'submenu2'" :class="{active: selectedSubmenu === 'submenu2'}">submenu 2</button>
    
    <!-- 直接渲染子组件 -->
    <component :is="getSubmenuComponent(selectedSubmenu)"></component>
  </div>
</template>

<script>
import Voice1Submenu1 from './voice1/Submenu1.vue'
import Voice1Submenu2 from './voice1/Submenu2.vue'

export default {
  data() {
    return {
      selectedSubmenu: 'submenu1'
    }
  },
  methods: {
    getSubmenuComponent(key) {
      const componentMap = {
        submenu1: Voice1Submenu1,
        submenu2: Voice1Submenu2
      }
      return componentMap[key] || Voice1Submenu1
    }
  }
}
</script>

<style scoped>
button.active {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
}
</style>

关键注意点 #

• 嵌套路由的父组件必须包含<router-view>，否则子路由的组件无法渲染。
• 默认子路由的path设为空字符串，配合redirect可以自动跳转到第一个子菜单，也可以直接指定component来渲染对应内容，两种方式都可行。
• 如果使用history模式，需要配置服务器的 fallback 规则（比如Nginx的try_files $uri $uri/ /index.html;），避免刷新页面出现404。

这样配置后，访问/voice1会自动显示submenu1的内容，访问/voice1/submenu2则直接显示对应内容，完全匹配你的三级菜单需求~

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