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

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

效果：

首页：

car页：