当前位置: 首页 > 编程笔记 >

讲解vue-router之什么是嵌套路由

阎唯
2023-03-14
本文向大家介绍讲解vue-router之什么是嵌套路由,包括了讲解vue-router之什么是嵌套路由的使用技巧和注意事项,需要的朋友参考一下

上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。

GitHub:https://github.com/Ewall1106/mall

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

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

2.具体是怎么实现的?

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

title1.vue

title2.vue

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

路由配置

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

③ 然后我们再去到test.vue中敲:

在这里提个醒,在to后面写路由路径的时候,一定到带上绝对路径,也就是要把test这个父路由路径写进去"/test/title1"

test.vue

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

localhost

点击标题

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍讲解vue-router之什么是动态路由,包括了讲解vue-router之什么是动态路由的使用技巧和注意事项,需要的朋友参考一下 前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起。 GitHub:https://github.com/Ewall1106/mall/tree/master 1、动态路由有一个什么适用场景呢? 比如在写商品详情页面的时候

  • 本文向大家介绍vue-router实现嵌套路由的讲解,包括了vue-router实现嵌套路由的讲解的使用技巧和注意事项,需要的朋友参考一下 一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的 嵌套路由的现象:点击了路由跳转之后父路由

  • 本文向大家介绍解决vue-router 嵌套路由没反应的问题,包括了解决vue-router 嵌套路由没反应的问题的使用技巧和注意事项,需要的朋友参考一下 先看下route.js 当你访问的时候,发现 http://localhost:8080/#/login http://localhost:8080/#/class 都正常,但是: http://localhost:8080/#/course/

  • 本文向大家介绍vue-router:嵌套路由的使用方法,包括了vue-router:嵌套路由的使用方法的使用技巧和注意事项,需要的朋友参考一下 模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>。 然后js里定义路由组件的时候: 路由嵌套 实际应用界面,通常由多层嵌套的组件组合而成。 比如,我们 “首页”组件中,还嵌套着 “登录”和 “注册”组件,那

  • 问题内容: 我正在React-Router中设置一些嵌套路由(我正在使用v0.11.6),但是每当我尝试访问其中一个嵌套路由时,都会触发父路由。 我的路线如下所示: 如果我将路线折叠起来,它看起来像: 它工作正常。之所以要嵌套,是因为我将在“仪表盘”下有多个子代,并希望它们在URL中都带有前缀。 问题答案: 配置与路由无关(尽管有名称),而是与路径驱动的布局有关。 因此,使用此配置: 就是说要嵌入

  • 本文向大家介绍详解vue路由篇(动态路由、路由嵌套),包括了详解vue路由篇(动态路由、路由嵌套)的使用技巧和注意事项,需要的朋友参考一下 什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。 web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块) 使用vue