首页 > 其他分享 >路由--工作原理

路由--工作原理

时间:2024-01-18 12:44:50浏览次数:26  
标签:Vue -- 路径 Router 组件 原理 播放 路由

什么是 <router-view>

  • <router-view> 是 Vue Router 提供的一个特殊组件。
  • 它的作用是作为一个占位符,用于显示当前路由对应的组件。

如何理解 "路由出口"?

  • <router-view> 想象成一个电影院的屏幕。你可以在这个屏幕上播放不同的电影(组件),而哪部电影正在播放则取决于电影院的播放安排(Vue Router 的路由配置)。
  • 当你更改播放安排(切换路由),屏幕上的电影也会相应更换。

 

Vue Router 如何决定渲染哪个组件?

  1. 路由配置:你在 Vue Router 的配置中定义了一系列的 "播放安排"。这些配置告诉 Vue Router 当用户访问特定路径(如 /home/about)时应该显示哪个组件。

  2. 用户访问特定路径:当用户访问一个路径(比如 /about),Vue Router 查找其配置,找到与这个路径相匹配的组件(在这个例子中是 AboutComponent)。

  3. 渲染组件:找到匹配的组件后,Vue Router 在 <router-view> 的位置显示这个组件。如果用户切换到另一个路径,Vue Router 会在同一个 <router-view> 位置替换为新的组件。

  

  

 

  4. 挂载到了整个应用的入口点index.html 

  

 

 总结:

    当用户访问不同的路由时,Vue Router 查找与当前路由路径匹配的组件,并渲染到 App.vue 中的 <router-view> 里。因此,<router-view> 中不需要手动写入任何组件标签,Vue Router 会自动处理这一切。这也是为什么在 <router-view> 标签中看不到任何东西,但你的应用却能够根据不同的路由显示不同的页面内

 

案例:

点击实现页面跳转

 

标签:Vue,--,路径,Router,组件,原理,播放,路由
From: https://www.cnblogs.com/mxleader/p/17972257

相关文章

  • 奇迹Mu中冒险家们的新任务——挑战副本
    奇迹Mu作为一款经典的多人在线角色扮演游戏,在其丰富多彩的游戏世界中,紧跟潮流的游戏开发者们也不断推出更新和新玩法,以吸引更多的玩家加入其中。不久前,奇迹Mu更新了一项全新玩法——挑战副本。这项新任务不仅为冒险家们带来了更多的挑战和乐趣,更为游戏的发展注入了新的活力。以下......
  • 山 水
    岳麓山 武当山 山不在高,有仙则名;水不在深,有龙则灵意思:山不一定要高,有仙人居住就成为名山了;水不一定要深,有蛟龙就成为灵异的水了。  山不高而秀雅;水不深而澄清;地不广而平坦;林不大而茂盛;猿鹤相亲,松篁交翠。——罗贯中·《三国演义》《三国演义》描绘了诸葛亮隐居时的......
  • Web Components从技术解析到生态应用个人心得指北
    WebComponents浅析WebComponents是一种使用封装的、可重用的HTML标签、样式和行为来创建自定义元素的Web技术。WebComponents自己本身不是一个规范,而是一套整体技术,包含下面3个独立规范:CustomElements:允许开发者定义自己的HTML标签(考虑SEO,还是语义化为好)。Sha......
  • winform Application.OpenForms 判断打开的窗体数量
    List<string>openFrom=newList<string>();if(Application.OpenForms.Count>2){stringresult=string.Empty;for(inti=0;i<Application.OpenForms.Count;i++){......
  • 将.NET Core项目部署到Azure App Service
    步骤1:创建ASP.NETCoreWeb应用首先,确保你已经安装了.NETCoreSDK。dotnetnewwebapp-nAzureSampleAppcdAzureSampleApp这将创建一个新的ASP.NETCoreWeb应用,并将目录更改为新创建的应用目录。步骤2:一个简单的首页编辑Pages/Index.cshtml文件,添加一些内容来展......
  • .NET Core如何调SAP接口-.NET Core如何调WebService接口
     情况说明 客户提供一个SAP接口,接口通过浏览器可以打开查看,如下图: 输入帐号密码后登录: 接口开发连接接口服务上述情况,SAP接口已就绪,现在开始开发接口调用。首先,创建.NETCoreWeb项目,然后如下图,连接接口服务。           创......
  • mysql和redis库存扣减和优化
    前言大流量情况下的库存是老生常谈的问题了,在这里我整理一下mysql和redis应对扣除库存的方案,采用jmeter进行压测。JMETER设置库存初始值50,线程数量1000个,1秒以内启动全部,一个线程循环2次,共2000个请求MySQL方案初始方案<updateid="decreaseStock">UPDATEstock......
  • 阿里云容器服务助力万兴科技 AIGC 应用加速
    作者:子白(顾静)2023年堪称是AIGC元年,文生图领域诞生了StableDiffusion项目,文生文领域诞生了GPT家族。一时间风起云涌,国内外许多企业投身AIGC创新浪潮,各大云厂商紧随其后纷纷推出自己的大语言模型。在文生图领域落地的企业更多,国外的如Midjourney,国内的如AIGC软件公司......
  • 梦幻内存!全何为AMD撕裂者打造192GB DDR5-7200
    1月16日消息,全何科技(V-Color)宣布,面向AMD锐龙线程撕裂者7000系列处理器,推出顶级的192GBDDR5内存套装,频率最高可达7200MHz。AMD撕裂者7000系列支持四通道DDR5内存,单系统可以插四根,虽然不及撕裂者PRO7000系列的八通道,但在消费级领域也是无敌的存在。全何新内存采用精选的SK海......
  • 题解 CF653F Paper task
    CF653FPapertask给定一个长度为\(n\)和括号串,求本质不同的合法括号串个数。\(n\le5\times10^5\)。考虑如果不是求本质不同,可以想到DP。设\(f_{i}\)表示以\(i\)结尾的括号串数,容易发现\(f_{i}=f_{t_{i}-1}+1\),其中\(t_{i}\)表示与\(i\)匹配的左括号位置。用栈......