文字加代码搞懂vue中动态路由和嵌套路由及区别

一、什么是路由

• 网络原理中：指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程
• web开发中：根据网址找到能处理这个的URL程序或模块
• vue.js中：vue中的基础是组件，引入vue-router后，处理路由与组件的映射，即将url对应到组件上

二、基本路由与动态路由

基本路由：一个路由对应一个组件，如下代码{path:’/home’,component:Home}
动态路由：使用参数将所有路由对应到一个组件中，如{path:’/user/:userId’,component:User}
注意：动态路由中path属性中以冒号(:)开头

效果展示
当改变App.vue中userId属性值时，url显示的值也会不同

三、嵌套路由

通常vue项目由多个嵌套的组件的组成，也就是嵌套组件
代码中在原有的path属性下，加入了children属性

图片中1234就是代码执行的过程，脑子中将代码执行顺序走一遍，你就会了
显示效果

四、动态路由和嵌套路由区别

先看url实现效果

动态路由：使用参数将所有路由对应一个组件，如userlisi，userzhangsan都对应User一个组件
嵌套路由：每个子路由都对应一个组件，如父路由home,子路由news、message分别对应一个组件

在实际项目，动态路由和嵌套路由可以一块使用