美文网首页
51-Vue路由嵌套路由

51-Vue路由嵌套路由

作者: 梦想成为小仙女 | 来源:发表于2019-03-04 17:13 被阅读14次

如过我们想在一个路由切换中再嵌套一个路由切换,要如何做呢?这里关键问题,实现方法

效果图.gif image.png
https://router.vuejs.org/zh/guide/essentials/nested-routes.html

一.关键问题

我们对于界面上有多个路由出口,我们要指定子路由的路由出口

二.解决方法

在路由配置的时候,给需要添加子路由的路由对象添加children属性,在children对应的数组中添加子路由

三.实现方法

  • 在组件中添加子路由导航和出口
  • 定义子路由组件
  • 在路由配置的时候给需要的路由添加子路由
  • 注意:在配置子路由可以省略上一级路由/,系统会自动编译


    image.png
    image.png
    image.png

相关文章

  • 51-Vue路由嵌套路由

    如过我们想在一个路由切换中再嵌套一个路由切换,要如何做呢?这里关键问题,实现方法 一.关键问题 我们对于界面上有多...

  • vue嵌套路由

    嵌套路由 定义:路由中嵌套子路由,子路由中关键属性children例: 页面上 路由中

  • vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由...

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • vue-routes 基础(一)

    路由常用技巧 更新:2020-12-25 获取当前路由 路由监听(路由地址变化时才执行) 嵌套路由 嵌套路由其实就...

  • 动态路由 & 嵌套路由实例

    1.动态路由 注意:动态路由以‘:’开头。$route 参数表见 “ 动态路由 & 嵌套路由 ” 2.嵌套路由 注...

  • 二、vue基础-路由(重要)

    嵌套路由 嵌套路由需求场景 实际开发中的应用界面,通常由多层嵌套的组件组合而成 嵌套结构要对应着嵌套路由(通过路由...

  • Vue嵌套路由和路由守卫

    嵌套路由 路由守卫

  • 3.路由vue-router

    设置路由 两种写法 路由跳转 嵌套路由

  • vue路由的介绍(四)--嵌套路由

    嵌套路由 简单的理解就是在路由中在嵌套一层路由。 具体的做法是: 1,配置路由 2,父路由里面配置子路由显示的地方...

网友评论

      本文标题:51-Vue路由嵌套路由

      本文链接:https://www.haomeiwen.com/subject/ckiiuqtx.html