Vue3 路由 (ts)

一、安装

npm i vue-router

二、创建

1、新建

src/router/index.ts

index.ts

import {createRouter, createWebHashHistory} from 'vue-router'// 配置路由
const router = createRouter({history: createWebHashHistory(),routes:[{path:'/student',component:()=>import('@/components/Student.vue')},{path:'/person',component:()=>import('@/components/Person.vue')},]
})// 暴露路由
export default router

2、配置

main.ts

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'const app = createApp(App)
// 配置路由
app.use(router)
app.mount('#app')

3、使用

<template><div><RouterLink to="/student">学生</RouterLink><RouterLink to="/person">人类</RouterLink><hr><div><h2>内容</h2><RouterView></RouterView></div></div>
</template><script lang="ts" setup name="App">
// import { RouterView, RouterLink } from 'vue-router'; </script><style></style>