4.vue-router之什么是嵌套路由

上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。 GitHub:https://github.com/Ewall1106/mall

1.嵌套路由的使用场景是什么呢?

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。

2.具体是怎么实现的?

① 为了演示,我们现在view文件夹下新建一个title1.vuetitle2.vue用来存放不同的内容

title1.vue

title2.vue

② 现在我们在routerindex.js 中将这上面两个新建的组件引入进来并填写路径,这里的Title1Title2是作为test.vue页面的子路由,所以要写在children属性下

路由配置

这里需要提个醒的就是填写children子路由的path不要加/

③ 然后我们再去到test.vue中敲: 在这里提个醒,在to后面写路由路径的时候,一定到带上绝对路径,也就是要把test这个父路由路径写进去"/test/title1"

test.vue

④ 最后我们进入浏览器点击不同的标题就可以看到不同内容的展示

localhost

点击标题

参考学习 https://router.vuejs.org/zh-cn/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏V站

Speed丨如何快速给网站添加Pjax?

Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后...

27340
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(一)

一般来说键盘用的越多鼠标用的越少,那么写起代码来效率就越高;常见的快捷键想必大家都已经掌握,接下来我就分享一些你可能不知道的但确非常实用的快捷键。

13140
来自专栏前端儿

在浏览器客户端进行爬虫开发

在Node环境下,可以用Request模块请求一个地址,得到返回信息,再用正则匹配数据,或者用Cheerio模块包装-方便定位相关的标签项

50810
来自专栏向治洪

React Native的WebStorm基本设置

jsx语法设置 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: ? 当然我们点击转换后就可以了,但是每次都...

28150
来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

60330
来自专栏崔庆才的专栏

腾讯云主机Python3环境安装PySpider爬虫框架过程

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速、原生支持各种Web标准:DOM...

1.4K10
来自专栏前端萌媛的成长之路

url、href和src区别

1.4K40
来自专栏DeveWork

WordPress 路径相关函数总结(一):站点路径相关函数

在开发WordPress 相关产品(主题、插件)的时候,常常需要通过某些函数获取路径,包括URL路径和服务器路径。比如说在主题或插件中引用js或css文件需要U...

25460
来自专栏Python爬虫与算法进阶

Python爬虫进阶(一)使用Selenium进行网页抓取

萌新要学习Selenium了,安装是个坑。还要下载相关配件,可以参考python 安装selenium环境(https://my.oschina.net/hyp...

41350
来自专栏前端安全

前端调试入门

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题...

1K330

扫码关注云+社区

领取腾讯云代金券