准备工作

使用脚手架创建项目，在创建的时候勾选router。或者自己下载

npm： npm install vue-router@4

yarn： yarn add vue-router@4

动态路由

说明

官方：我们需要将具有给定模式的路由映射到同一组件

个人理解：动态路由区别于普通的静态路由，主要作用是为了对一个组件不同内容的加载

简单理解情景：对于不同的用户id需要展示不同的内容

比如id为1的用户的内容组件展示的是 你好世界，id为2的用户的内容展示的是 你好李四

demo展示

代码

在route文件夹中的index文件中对TextView组件配置路由同时对路由路径设置id字段

TextView.vue的内容

结果展示

在输入路径http://localhost:8080/#/text/123 后显示结果如下，测试页面123，打印666

在输入路径http://localhost:8080/#/text/456 后显示结果如下，测试页面456，未再次打印666

总结

由上面结果可以看出，动态路由对同一页面的不同内容展示，并不是对该组件的销毁和重新构建，而是对该组件的复用，这在生命周期不会再次触发也有印证

嵌套路由

说明

官方：

个人理解：官方说的真好

简单理解场景:就像洋葱，一层往一层里面套，你要看到第三层的洋葱，你就必须把第一层和第二层剥开

demo展示

代码

结果展示

这个是官方的演示连接(Nested Views - Vue Router 4 examples - CodeSandbox)你可以自己点击过去试试

总结

嵌套路由主要作用在于应用的ui搭建，注意事项就是你看path路径前没有加 /

编程式导航

官方说明：我们还可以借助 router 的实例方法，通过编写代码来实现路由的跳转。

个人理解：编写代码实现的路由跳转。区别于 a 标签和 route-link标签这些声明式

理解场景：浏览器的返回标签，登录页面的登录按钮。

demo展示：

代码

这里有一个问题，如果你使用的是语法糖模式那么你使用this.$router.push时你要注意到this的指向问题 当然我直接不用这种语法属于是偷懒了，点击button按钮之后就可以跳回home页面

结果展示

就是实现和声明式一样的效果就没啥好总结的

这是一篇简单的小白文，关于vue-route的路由组件传值不是很理解所以这里就不误导别人了，有写的好的欢迎给一下连接