vite+vue3中如何使用router

npm i vue-router -S

import { createRouter, createWebHistory } from "vue-router";
import home from "../view/Home.vue";
const routes:any = [
    {
        path: '/',
        component: home
    },
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default 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

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

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')