解决Vue3配置子路由不生效的问题-Vue3二级路由不生效解决方案

本文链接：https://blog.youkuaiyun.com/l1347889755/article/details/141425381

1.首先我们创建一个路由规则：

router -> index.js


// createRouter 创建路由实例 
// createWebhistory 创建history模式的路由
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Category from '@/views/category/index.vue'
import Home from '@/views/home/index.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        {
          path:'',
          component: Home
        },
        {
          path:'category',
          component: () =>import('../views/category/index.vue')
        }
      ]
    },
    {
      path: '/login',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/Login/index.vue'),

    }
  ]
})

export default router

其中组件Layout 和 Login 是一级路由。 Category 和 Home 是二级路由。

分别在一级组件 App.vue 和子组件下的index.vue 配置路由出口 --> <RouterView/>