路由堆叠在一起

这个问题通常出现在使用了多个路由时，每个路由都会添加到路由器中，导致路由器中出现多个路由堆叠在一起。为了解决这个问题，可以在每个子路由器中使用 base 选项来指定父路由地址，并使用 routes 选项来提供子路由列表。以 Vue Router 为例，代码示例如下：

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

Vue.use(VueRouter)

const routerA = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home')
    },
    {
      path: '/about',
      component: () => import('@/views/About')
    }
  ]
})

const routerB = new VueRouter({
  mode: 'history',
  base: '/blog',
  routes: [
    {
      path: '/',
      component: () => import('@/views/BlogHome')
    },
    {
      path: '/post/:id',
      component: () => import('@/views/BlogPost')
    }
  ]
})

const app = new Vue({
  router: routerB,
  template: `<div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/blog/">Blog Home</router-link>
    <router-link :to="'/blog/post/' + postId">Blog Post {{ postId }}</router-link>
    <router-view></router-view>
  </div>`
}).$mount('#app')

// 父路由器中添加子路由器
routerB.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 用户需要登录才能访问这个页面
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

在这个示例中，我们创建了两个路