Vue3 配置路由

1、安装路由

npm install vue-router@4

笔者这里的演示项目名称是 vue3-project

 

 

 

2、新建页面

这里创建 view目录，然后在view目录下创建 A.vue B.vue 两个 vue页面文件

 

 

 A.vue内容

 

 

 B.vue内容

 

3、创建路由配置文件

新建 router目录，然后在 router目录下新建 index.js和 routes.js文件

index.js 文件内容如下

 

 

 routes.js 文件内容如下

 

 

 在 main.js中配置路由

 

 

 

4、添加 router-view

笔者这里为了演示在 app.vue文件中添加，读者可根据自己的情况进行添加

 

 

 

路由控制在 HelloWorld.vue文件中

使用 this.$router.push()方法进行路由跳转

 

 

 5、运行效果          受图片限制，效果应该是点击A页面出现A页面 ,点击B页面出现B页面