美文网首页
52-Vue路由命名视图

52-Vue路由命名视图

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

和具名插槽使用方法类似.实现一个路由地址显示多个视图(组件),这里实现方法,案例分析

image.png

一.实现方法

  • 添加多个路由出口并设置name属性
  • 给路由配置多个组件


    image.png
    image.png
    image.png
  • 示意:name为left的出口对应组件one
  • name为right的出口对应组件two

二.案例分析

https://m.jd.com/

image.png
  • 首页路由对应多个组件(路由出口)

相关文章

  • 52-Vue路由命名视图

    和具名插槽使用方法类似.实现一个路由地址显示多个视图(组件),这里实现方法,案例分析 一.实现方法 添加多个路由出...

  • vue-路由

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

  • Vue-router2.0基础实践

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

  • larevel 路由索引

    基本路由:路由重定向、视图路由路由参数:必选、可选、正则表达式命名路由路由组:中间件、命名空间、子域名路由、路由前...

  • vue-router之命名路由和命名视图

    6、vue-router之命名路由和命名视图 1.首先来说说什么是命名路由? 就是在routers配置路由名称的时...

  • 6、vue-router路由

    1、安装 2、结构 3、动态路由匹配 4、嵌套路由 5、编程式导航 6、命名路由 7 、命名视图 8、重定向和别名...

  • 第4讲 详解如何在项目里配置路由(2)

    上篇文章,我讲了路由里面的,动态路由匹配,编程式导航,嵌套路由匹配,命名路由,命名视图,重定向这几个知识点,但是官...

  • vue路由--命名视图

    有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主...

  • 6.vue-router之命名路由和命名视图(手把手教你用vue

    前言:前面我们把动态路由、嵌套路由等讲完了,说道完命名路由和命名视图,vue-router的基本使用方法就算是完篇...

  • vue 命名路由和命名视图

    命名路由就是给路径添加一个别名省去手写路径直接以别名替代路径 命名视图 有时候想同时 (同级) 展示多个视图,而不...

网友评论

      本文标题:52-Vue路由命名视图

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