深入Vue-Router路由嵌套理解资源-CSDN下载

5星 · 超过95%的资源 126 浏览量 2020-12-09 11:38:51 上传评论收藏 43KB PDF 举报

资源推荐

资源详情

资源评论

深入深入Vue-Router路由嵌套理解路由嵌套理解

背景背景

最近有个初学Vue的朋友问我，为什么我的两层路由跳不起来了，直接输url也不行？信息不是很充足及看不到源码的我，当时

是那个一脸懵逼啊，心想这肯定是代码的问题，跟层级无关。接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有

理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解

Vue-Router嵌套路由嵌套路由

首先假设项目中有两个路由Profile和Posts，按写法把他们定义为一层路由，是Root的子路由，因此Root中要有router-view组

件去承载子路由，才能实现子路由切换展示

一层路由一层路由

Root容器

<div>

<h1>Root</h1>

<router-view />

</div>

一层路由写法

[

{

path: '/profile'

component: profile // 组件引用此处省略引用

},

{

path: '/posts'

component: posts // 组件引用此处省略引用

},

]

一层路由展示

Root的子路由展示是在Root中的，切换路由其实只是切换了router-view容器的内容

/profile /posts

+------------------+ +-----------------+

| Root | | Root |

| +--------------+ | | +-------------+ |

| | Profile | | +------------> | | Posts | |

| | | | | | | |

| +--------------+ | | +-------------+ |

+------------------+ +-----------------+

二层路由二层路由

在上面的基础上，对profile加一层路由

profile容器

<div>

<h1>profile</h1>

<router-view />

</div>

profile子路由

[

{

path: '/profile'

component: profile, // 此处不能少

children: [

{

path: '/profile/list',

component: profileList

},

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

丛乐

2023-06-13

这篇文章非常实用，解释了Vue-Router路由嵌套的一些核心概念。
艾闻

2023-06-13

这篇文章不仅理论充分，更重要的是给出了实际应用的案例，非常贴近实际开发。
乐居买房

2023-06-13

我觉得这篇文章简单易懂，对于刚学习Vue的人来说非常友好。
尹子先生

2023-06-13

这篇文章虽然字数不多，但每一个段落都非常精彩，值得细读。
张博士-体态康复

2023-06-13

这篇文章用适度的幽默和准确的语言，对Vue-Router路由嵌套进行了全面分析。

前往

页

weixin_38525735

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip