当前位置：首页 > news >正文

(vue)vue3+vite+ts项目router路由添加

news 2025/6/1 8:00:03

(vue)vue3+vite+ts项目router路由添加

（一）在 Vue 3 + Vite 项目中添加路由的方法

1. 安装 Vue Router

npm install vue-router@4

在这里插入图片描述

2. 创建路由配置文件

在 src 目录下创建 router 文件夹，然后创建 index.js 或 index.ts 文件：

src/
└── router/└── index.js  # 或 index.ts (如果是TypeScript项目)

3. 配置基本路由

编辑 src/router/index.ts 文件：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' // 假设你有这个组件const routes = [{path: '/',name: 'home',component: HomeView},{path: '/carData',name: 'carData',// 路由级代码拆分// 这会为这个路由生成一个单独的块 (about.[hash].js)component: () => import('../views/CarBigData/index.vue')}
]const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes
})export default router

4. 在 main.js 中引入路由

修改 src/main.ts 文件：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' //导入路由配置const app = createApp(App)app.use(router) //使用路由app.mount('#app')

5. 修改 App.vue 添加路由视图和导航

准备组件
在这里插入图片描述

修改 src/App.vue 文件：

<script setup lang="ts"> import HeaderView from "./components/layouts/HeaderView.vue";import FooterView from "./components/layouts/FooterView.vue";
</script><template><HeaderView /><router-view /><FooterView />
</template>