vite ts vue中增加路由

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

npm init [email protected] projectname vue-tempelete

bash 复制代码

npm init [email protected] test2001 vue-tempelate

二.packages.json中增加这个

XML 复制代码

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

TypeScript 复制代码

// 本文件 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

XML 复制代码

<!-- 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

XML 复制代码

<!-- 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');

TypeScript 复制代码

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的内容)：

XML 复制代码

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

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

TypeScript 复制代码

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"],
  },
});