(13)项目集成Vue Router4 配置基本路由

安装 Vue Router4

npm install vue-router@4

配置基本路由

// @/router/index.ts
import { useUserStore } from "@/store/userStore";
import { createRouter, Router, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: RouteRecordRaw[] = [{
    path: '/',
    redirect: '/home'
}, {
    path: '/login',
    component: () => import('@/views/login/login.vue')
},
{
    path: '/home',
    component: () => import('@/views/home/home.vue')
}]
const router: Router = createRouter({
    history: createWebHistory(),
    routes: routes
})
export default router

注册路由

//main.ts
import router from './router'
app.use(router)

配置路由入口

<template>
  <RouterView></RouterView>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

自定义login组件

自定义home组件