代码举例vue实现三级路由

下面是一个简单的 Vue 三级路由的示例：

// 引入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入三个组件，分别用于三级路由的三个页面
import PageA from './components/PageA.vue'
import PageB from './components/PageB.vue'
import PageC from './components/PageC.vue'

// 安装 Vue Router
Vue.use(VueRouter)

// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/page-a' // 默认跳转到 PageA 页面
    },
    {
      path: '/page-a',
      component: PageA,
      children: [
        {
          path: '',
          redirect: 'page-b' // 默认跳转到 PageB 页面
        },
        {
          path: 'page-b',
          component: PageB,
          children: [
            {
              path: '',
              redirect: 'page-c' // 默认跳转到 PageC 页面
            },
            {
              path: 'page-c',
              component: PageC
            }
          ]
        }
      ]
    }
  ]
})

// 创建 Vue 实例并挂载路由
new Vue({
  router
}).$mount('#app')

在上面的示例中，我们使用了 Vue Router 来实现三级路由。首先使用 `Vue.use(VueRouter)` 安装 Vue Router，然后配置路由，其中使用 `children` 属性来定义子路由，从而实现三级路由的效果。最后创建 Vue 实例并将路由挂载到根组件上。