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"],
  },
});
相关推荐
二十雨辰20 分钟前
vite如何处理项目中的资源
开发语言·javascript
洛可可白1 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
四月_h2 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate3 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古4 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
疯狂踩坑人5 小时前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
极客小俊6 小时前
【浅谈javascript禁术】 eval函数暗藏玄机?
javascript
533_6 小时前
[element-plus] el-select 下拉选择图片
vue.js
李明卫杭州6 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-6 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json