Vue3手动装配路由Router

yarn add vue-router@4
或者
npm i vue-router@4 -S

main.js里面

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

//注意use要在mount之前
createApp(App).use(router).mount('#app')

 新建路由文件夹

路由inde里面

import {createRouter, createWebHistory} from 'vue-router'
import routes from './router'

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

route里面

const router = [
    {
        name: 'Index',
        path: '/',
        component: ()=> import('../pages/index.vue'),
        children:[{
            name: 'com',
            path: '/com',
            component: ()=> import('../components/HelloWorld.vue'),
        }]
    },
]
export  default router

首页里跳转用

    this.$router.push('/com')

 

我的文件结结构

 这样嵌套路由也做好了