Vue Router学习(四)—— 嵌套路由

前言

前面我们介绍routes路由属性时,有一个children属性,代表着路由下面的子路由,我们称之为嵌套路由,日常开发中我们必定会用到嵌套路由,本节我们就来学习一下。

嵌套路由

嵌套路由很有实际意义,因为组件是有嵌套关系的存在,路由与组件是对应的,如果我们做过后台管理项目,很多页面都是嵌套路由的写法,比如列表路由、编辑路由等,两者都存在关联。嵌套路由的语法很简单,就是在创建路由时将子路由放到children。children的ts接口依旧为RouteRecordRaw数组,这也就意味着嵌套可以无限下去。

视图

嵌套路由写法虽然很简单,但还是有好几个注意的点,下面我们就在home路由添加一个子路由渲染下视图。

我们添加了一个hello子路由,注意此时的path是没有添加路径/,加载路由的写法就是父路由后面拼接path名称,我们打开页面请求/home/hello。

还是home界面,这是为什么呢?原因很简单,home文件没有添加router-view,路由想要渲染出对应的视图,必须要用router-view,嵌套路由就需要在父路由添加。我们在home界面添加一个router-view,然后刷新页面。

子路由对应的组件就渲染出来了。嵌套路由的表现出来的就是嵌套组件,这也是我们一直强调的路由对于组件,总结一下:

嵌入路由------(router-view)------>嵌入组件

路径

上面例子中我们path写的就是名称,接下来我们把子路由的path加上/,然后再加载/home/hello页面是空白的,我们需要请求/hello。

以/开头路径就会当作根路径 , 还有一个比较特殊的情况------空路径,也就是path设置为空。

如图所示,当嵌套路径为空时,会直接显示出来。根据上述特点,我们可以总结出一套写法:

  1. 父路由component对应的vue文件,只写一个router-view。
js 复制代码
 <template>
  <router-view></router-view>
</template>

我们就可以写一个公共的vue文件,添加以上代码,父路由的component指向该文件即可。

  1. 嵌套路由第一个路由的path设置为空,此时就默认将对应的component展示。 3. 其他路由的path前面都加上/,写出根路径,并且声明name。

该写法就是单纯把父路由当成了组件出口,当然嵌套路由的写法没有标准,只要能满足需求,正确渲染出页面就可以。

总结

以上就是嵌套路由,虽然简单,但需要注意嵌套路由一定要在父路由中添加router-view,path路径不同的写法对应着不同做法,我们要根据自己的需要选择合适的写法。

相关推荐
Sheldon一蓑烟雨任平生2 分钟前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
詩句☾⋆᭄南笙2 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒15 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌19 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip25 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙30 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
夏天想38 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界1 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde1 小时前
【C++】深入理解string类(5)
java·前端·算法
袁煦丞1 小时前
随机菜谱解救选择困难!YunYouJun/cook 成为你的厨房锦囊:cpolar内网穿透实验室第549个成功挑战
前端·程序员·远程工作