vite vue3 ts（二） 引入vue-router 使用嵌套路由

引入vue-router

1、安装依赖

npm install vue-router@4

2、 在src文件夹下新建router文件夹，在router文件夹下新建index.ts文件

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path:'/',
        redirect:'/dashboard'  // 重定向
    },
    {
        // 页面逻辑
        path: '/dashboard',
        name: 'dashboard',
        component: () => import('@/views/dashboard.vue'),//动态引入
    },
    {
        path: '/menuFirst',
        name: 'menuFirst',
        component: () => import('@/views/menuFirst/menuFirst.vue'),
        // redirect:'/menuFirst/first',  // 重定向
        children: [//嵌套二级子路由
            {
                path: "first",
                component: () => import('@/views/menuFirst/first.vue'),
            },
            {
                path: "second",
                component: () => import('@/views/menuFirst/second.vue'),
            },
        ]
    }
]
// Vue-router新版本中，需要使用createRouter来创建路由
const router = createRouter({
    // 指定路由的模式
    history: createWebHistory(),
    routes
})
export default router

修改main.ts

...
import route from '@/router/index'
...
app.use(route)

修改app.vue

<script setup lang="ts"></script>
<template>
  <router-view></router-view>
</template>

menuFirst是嵌套路由，因此也要加上router-view 它的子路由才能显示出来

<template>
  一级路由
  <router-view></router-view>
</template>

first.vue 内容

<template>
  子路由1
</template>

最后结果：