【记录】配置vue3的路由，及一些之前没注意过的坑

1.安装路由

npm install vue-router@4

2.在main.ts中引入

3.在App.vue中放上路由插槽

接下来简单模拟下路由的使用

1.新建.vue文件、

如图所示

这里需要注意！！因为vuecli3推荐的命名是多词组命名。但是像我们这里用a来命名就要将组件的name属性添加起来，且不能是常用的单词。所以这里我们把name的值定为aOK。这种情况的报错在下图贴出来

b.vue和a.vue的内容类似，就不赘述了。

2.控制界面跳转的代码（网上示例一抓一大把，就直接用了）

 就是在后面的方法里做一个路由路径的改变。

3.index.vue（大概是个主界面）

  注意在这里同样也放了一个<router-view/>，这样就可以在这里显示它的子路由的内容了。效果大概就是在显示它的不同的子路由的内容时，index.vue本身的内容显示是保持不变的。后面贴出children路由的写法。

4.router.ts（路由文件的配置）

最后效果如图

点击A页面和B页面的按钮，下方的字母就会发生改变。

 

 

小白，对与很多概念的理解还是错误的，欢迎大家指正，共同学习。