文字加代码搞懂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分别对应一个组件

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章