vite ts vue中增加路由

一.首先建立脚手架工程：

npm init vite@4.4 projectname vue-tempelete

npm init vite@4.4 test2001 vue-tempelate

二.packages.json中增加这个

dependencies": {"vue": "^3.3.4","vue-router": "^4.2.4",

之后npm install来获取vue-router4.2.4

三.在src目录下

1.建立router目录，目录下建立index.ts文件

2.建立views目录，目录下建立About.vue与Home.vue

index.ts

// 本文件 router/index.ts
import {createRouter, createWebHistory, RouterOptions} from "vue-router";const routes = [{path: "/",component: () => import("../views/Home.vue"),},{path: "/about",component: () => import("../views/About.vue"),},
];const router = createRouter({history: createWebHistory(),routes,
} as RouterOptions);export default router;

Home.vue

<!-- src/views/Home.vue --><template><div class="vertical-layout"><header><h1>Home Page</h1></header><main><button @click="goToOtherPage">跳转到其他页面</button><p>Your main content goes here.</p></main><footer><p>Footer content goes here.</p></footer></div>
</template>
<script setup lang="ts">import { useRouter } from 'vue-router';const router = useRouter();const goToOtherPage = () => {console.log('Clicked!');// 在这里指定你想要跳转的路径router.push('/about');};
</script>
<style scoped>.vertical-layout {display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: 100vh; /* 设置整个布局高度为视口高度，以确保内容在竖屏中居中显示 */}header, main, footer {width: 80%; /* 设置宽度为80% */min-width: 800px; /* 设置最小宽度为400px */max-width: 1200px; /* 设置最大宽度为1200px */padding: 20px;box-sizing: border-box;text-align: center;background-color: #f0f0f0;margin: 10px 0;}@media screen and (max-width: 600px) {/* 在小屏幕上，设置宽度为100% */header, main, footer {width: 100%;}}
</style>

About.vue

<!-- src/views/About.vue --><template><div class="vertical-layout"><header><h1>About Page</h1></header><main><button @click="goToOtherPage">跳转到其他页面</button><p>Your main content goes here.</p></main><footer><p>Footer content goes here.</p></footer></div>
</template>
<script setup lang="ts">import { useRouter } from 'vue-router';const router = useRouter();const goToOtherPage = () => {console.log('Clicked!');// 在这里指定你想要跳转的路径router.push('/');};
</script>
<style scoped>.vertical-layout {display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: 100vh; /* 设置整个布局高度为视口高度，以确保内容在竖屏中居中显示 */}header, main, footer {width: 80%; /* 设置宽度为80% */min-width: 800px; /* 设置最小宽度为400px */max-width: 1200px; /* 设置最大宽度为1200px */padding: 20px;box-sizing: border-box;text-align: center;background-color: #f0f0f0;margin: 10px 0;}@media screen and (max-width: 600px) {/* 在小屏幕上，设置宽度为100% */header, main, footer {width: 100%;}}
</style>

main.ts当中这样写：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router';

createApp(App).use(router).mount('#app');

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import router from './router';createApp(App).use(router).mount('#app');

App.vue tempelete改写成以下(为的是加载到路由，不然还是只显示App.vue的内容)：

<template><div><router-view></router-view></div>
</template>

另：可以考虑在vite.config.ts中增加别名配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// export default defineConfig({
//   plugins: [vue()],
// })export default defineConfig({base: "./",plugins: [vue()],resolve: {// src 别名配置alias: {// "@": resolve(__dirname, "src"),"@":  "/src",},// 使用路径别名时想要省略的后缀名，可以自己增减extensions: [".js", ".json", ".ts"],},
});