vue3设置路由跳转页面

1.首先新建vue3项目

npm init vue@latest

2.这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

这里我们都选no，当然你也可以勾选上搭建项目时顺带安装好vue-router，如果勾选，跳过下面的步骤3
3.手动安装vue-router
在控制台输入命令

npm install vue-router@next

或者

npm install vue-router@4

可以下载安装vue-router4.X版本的路由
4.在src目录下新建views和router目录，然后在views目录中新建Test1.vue和Test2.vue文件

Test1.vue

Test2.vue
在router目录中新建index.js文件和routes.js文件

index.js

routes.js
5.修改入口文件main.js和App.vue

App.vue

main.js
6.npm run dev启动项目

切换路由