使用vite搭建vue3项目之集成vue-router（简单入门）_vite vue-router

参考：https://blog.csdn.net/AllenZouJ/article/details/118757640
vite官方文档
vue-router文档

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

Node版本查看node -v

1、创建vite项目

npm create vite@latest

1
2

输入项目名称（可使用默认值），这里改为my-vite-project

选择框架vue

选择TS

创建完成

启动项目

vscode打开项目，打开终端（Ctrl + ~）
安装依赖

npm install
1

启动

npm run dev
1

启动成功

集成vue-router

yarn add vue-router@next

1
2

项目目录

配置

1、新建组件a、b

src下新建views文件夹，并依次新建a.vue和b.vue文件
a.vue

<template>
  <div>
    <h1>我是页面a</h1>
  </div>
</template>
1
2
3
4
5

b.vue

<template>
  <div>
    <h1>我是页面b</h1>
  </div>
</template>

1
2
3
4
5
6

2、添加router配置

src下新建router文件夹，并在router文件夹下新建index.ts，其下添加以下内容
index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/a',
    name: '/a',
    component: () => import('../views/a.vue')
  },
  {
    path: '/b',
    name: '/b',
    component: () => import('../views/b.vue')
  },
  
 
] 
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"; //添加router

createApp(App).use(router).mount('#app') //use(router)

1
2
3
4
5
6
7

最后在App.vue文件中，注释掉template的内容，添加以下内容

  <div>
    <router-link to="/a">a页面</router-link>&nbsp;
    <router-link to="/b">b页面</router-link>
    <router-view />
  </div
1
2
3
4
5

重新打开页面：http://127.0.0.1:5173/

点击a页面

点击b页面