vue3创建路由

路由安装

pnpm i vue-router

npm install vue-router

yarn add vue-router

index.js配置

// <!-- 路由路口文件 -->

// <!-- createRouter 创建路由实列 -->
// createWebHashHistory hash模式
// createWebHistory 历史模式
import {createRouter,createWebHashHistory} from 'vue-router'

import Layout from '@/layout/Layout.vue'
//配置路由地址和路由组件对应关系
const routes=[
    {
        path:'/',
        component: Layout,
        children:[
            {
                path:'/base',
                component:()=>import('@/views/base/index.vue')
            }
        ]
    }
]

//创建路由实列 导入配置项
const router = createRouter({
    routes,
    history: createWebHashHistory()
})

//到处路由实列
export default router

 main.js导出路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入路由
import router from './router'
//创建app实列
const app = createApp(App)

app.use(router)

app.mount('#app')