vue--有关于嵌套路由的事情(三)

本文介绍了如何在Vue中实现嵌套路由,通过在App.vue设置顶层路由出口,控制不同组件显示。在遇到多层嵌套页面时,可以在最高级路由组件内创建次级出口,比如在Home组件中添加子组件Home-Child,并在router/index.js注册子路由,以此实现页面切换效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上面的(二)文章是针对一个页面来说的单个路径,如果碰见了多层嵌套组成的一个页面的情况下,我们就可以在一个页面下控制不同的组件的变化了
切换页面的效果可以是嵌套路由来实现,首先在上一个App.vue页面中的最顶层的路由出口是

<router-view></router-view>

通过组件渲染的方式实现调控的整体的页面,也就是用来渲染最高级路由匹配到的组件。
那么嵌套路由也是同样可以用这个来进行渲染新的组件的,但是不是根组件的出口,是在这个最高级路由匹配到的组件中嵌套一个新的次级出口
比如在Home组件中添加一新的次级出口

  1. 先在component中的page文件夹创建新的vue页面用作home的子页面:先在component/page文件夹中创建home-child.vue页面
<template>
	<div id 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值