vue路由

安装

npm i vue-router

基础用法

创建文件

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/components/Home.vue'
import NewsView from '@/components/News.vue'
import AboutView from '@/components/About.vue'const router = createRouter({history: createWebHistory(), //路由器工作模式routes: [{path: '/',name: 'home',component: HomeView,},{path: '/news',name: 'news',component: NewsView,},{path: '/about',name: 'about',component: AboutView,}],
})// 导出路由
export default router

创建 Home.vue、About.vue、News.vue，地址 src\components\Home.vue

<template><div><h1>Home</h1></div>
</template><script lang="ts">
import { defineComponent } from 'vue'export default defineComponent({setup() {return {msg: 'Hello Vue 3!',}},
})
</script>

main.ts

import { createApp } from 'vue'
// import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)// app.use(createPinia())
app.use(router)app.mount('#app')