一、什么是路由
- 网络原理中:指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程
- 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分别对应一个组件
在实际项目,动态路由和嵌套路由可以一块使用