vite+vue3整合router

• 安装插件

        open in browser v2.0.0

        Element UI Snippets v0.7.2

        Vue Language Features (Volar) v1.2.0

• 安装路由

npm install vue-router@4

• 创建路由文件

        src/router/index.ts

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'

import Login from '@/components/Login.vue'

import Home from '@/components/Home.vue'

import Welcome from '@/components/Welcome.vue'

import User from '@/components/system/user/index.vue'


const routes:Array<RouteRecordRaw>=[
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [
            {
                path: '/welcome',
                component: Welcome
            },
            {
                path: '/user',
                component: User
            }
        ]
    }
]

//路由对象
const router=createRouter({
    history:createWebHistory(),
    routes
})


//导出路由对象，在main.js中引用
export default router

• main.js引入

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'
import router from "./router/index";
import store from "./store/index"

import 'element-plus/dist/index.css'

//全局引入css
import './assets/css/glob.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')