vite ts vue中增加路由

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

npm init vite@4.4 projectname vue-tempelete

bash 复制代码
npm init vite@4.4 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"],
  },
});
相关推荐
W.Buffer1 小时前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
皓月Code2 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
MoonBit月兔2 小时前
MoonBit Pearls Vol.12:初探 MoonBit 中的 JavaScript 交互
开发语言·javascript·数据库·交互·moonbit
非凡ghost2 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
www_stdio2 小时前
深入理解JavaScript变量声明:var、let与const的全面解析
javascript
San302 小时前
AI 歌词生成器:使用 OpenAI 打造你的专属作词助手
javascript·人工智能·node.js
用户84298142418103 小时前
JavaScript数据类型
javascript