1）安装vue-router
yarn add vue-router
2）注册路由
将两个组件Home、Project注册到路由中：
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import App from "./App.vue";
const Home = { render(){ return 'Home'} }
const Project = { render(){ return 'Project'} }
const routes = [
{ path: '/', component: Home },
{ path: '/project', component: Project },
]
const app = createApp(App);
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
});
app.use(router);
app.mount("#app");3）使用路由
App.vue文件加入如下代码：
<template> <router-view></router-view> </template>
效果如下：
1）安装@types/node
yarn add @types/node
2）修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}
}
})3）修改tsconfig.JSON （不修改没有提示）
在compilerOptions中加入下面配置：
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"] //格式一定要写对符号*不能少不然找不到@或者没有代码提示
},
效果如下：
