美文网首页
命名式视图

命名式视图

作者: 有一种感动叫做丶只有你懂 | 来源:发表于2019-04-03 00:09 被阅读0次

1.路由配置

假设我路由配置如下

[
  {
    path:'/home',
    component:Home,
    children:[{
        path:'/home/home-list',
        components:{
            default:HomeList,
            a:HomeAdd
        },{
            path:'/home/home-add',
            component:HomeAdd
          }
     }]
  }
]

2.在根路由下('/home')

<template>
  <div>
    <router-view/>
    <router-view name="a"/>
  </div>
</template>

3.在/home/home-list中的实际效果

可以显示HomeAdd里面的内容
//从路由配置中我们可以看出/home/home-list和/home/home-add是同级路由,但是我们在他们共同的根路由里面加了一个名字叫做a的router-view,并且在路由中增加了配置,所以当路由匹配到'/home/home-list'的时候HomeAdd这个组件也会被显示出来,显示出来的位置取决于在根路由里面的位置

相关文章

  • 命名式视图

    1.路由配置 假设我路由配置如下 2.在根路由下('/home') 3.在/home/home-list中的实际效...

  • 命名视图

    使用多个带有name属性的(视图出口)来同时 (同级) 展示多个视图

  • Vue编程式导航、命名路由、命名视图

    前言 正如标题所示,本节我们将对编程式路由、命名路由和命名视图进行初步探索。所谓编程式导航是与前面我们使用的标签式...

  • iOS编码规范

    目录 核心原则 命名 文件命名 视图命名 方法命名 变量命名 图片命名 代码格式 空格 函数的书写 函数调用 协议...

  • 2020-02-28

    命名视图实现经典布局

  • vue命名视图

    命名视图 定义:同一路由,多种路径步骤:1.页面上: 2.配置路由规则时:

  • 四.Android编写代码规范

    0.命名法 驼峰式命名法(CamelCase)分大驼峰式命名法(UpperCamelCase)和小驼峰式命名法(l...

  • vue-路由

    需要掌握: 路由map路由视图路由导航 路由参数的配置嵌套路由的使用 命名路由和命名视图重定向 router/in...

  • Vue-router2.0基础实践

    基础用法: 动态路由匹配: 嵌套路由: 编程式路由: 命名路由: 命名视图:

  • 驼峰命名与下划线相互转换

    js将下划线命名与驼峰式命名相互转换 下划线转驼峰式命名 驼峰式命名转换为下划线

网友评论

      本文标题:命名式视图

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