vue-cli 默认路由重定向子路由选择状态的问题解决办法

2023-12-02 03:18:36

问题

当我使用Vue-cli创建项目时，默认会提供一个根路由和子路由。当我在子路由之间切换时，我会发现根路由仍然处于选中状态。我认为根路由和子路由是同级，不应该出现这种情况。

解决方案

为了解决这个问题，我使用重定向，规定默认路由跳转到上面/index下面的默认子路由。再由默认的子路由跳转到其他的子路由。这样，当我在子路由之间切换时，根路由就会处于未选中状态了。

具体步骤

在 src/router/index.js 文件中，添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/index'
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      children: [
        {
          path: '',
          component: () => import('@/views/Home.vue')
        },
        {
          path: 'user',
          component: () => import('@/views/User.vue')
        },
        // 其他子路由
      ]
    },
    // 其他路由
  ]
})

export default router

在 src/views/Index.vue 文件中，添加以下代码：

<template>
  <div>
    <!-- 子路由的内容 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Index',
  components: {
    // 子路由组件
  }
}
</script>