vue 中 命名视图的用法实例详解


Posted in Javascript onAugust 14, 2019

今天主要记录  vue中命名视图的用法

先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html

一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件、内容区是一个组件,我们普遍会将两个组件作为子组件添加到主页面中,因为页面中只有一个

router-view视图,那么问题来了,怎么让一个页面中有多个视图呢,拥有多个视图,很随意,多写几个router-view标签就行了,但是每个router-view视图里面显示的相同的内容,这是一个问题,多写几个视图好像没什么用,那么怎么让一个页面中的多个视图显示不同的内容呢?

下面就来介绍命名视图的作用,首先,一般情况下,我们在路由配置中,一个路由路径只能对应一个组件,若想对应多个组件,必须得作为子组件存在,然后再一个公用的视图内显示,这是一个路由对应多个组件,这些组件对应一个视图

例如:

{
path:'tv',

name:'tv',

component:Tv,

children:[


{path:'',component:Zhonghe},


{path:'zhonghe',component:Zhonghe},


{path:'guochan',component:Guochan},


{path:'yingmei',component:Yingmei},


{path:'riju',component:Riju},


{path:'hanju',component:Hanju}

]
},

那么,下面来介绍命名视图:有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components配置 (带上 s):

const router = new VueRouter({
 routes: [
  {
   path: '/',
   components: {
    default: Foo,
    a: Bar,
    b: Baz
   }
  }
 ]
})

解释一下:

在这个默认路由下,

第一个非未命名视图显示Foo组件

第二个name名为a的视图显示Bar组件

第二个name名为b的视图显示Baz组件

然后自己有些了个demo

<template>
<div class="hello">


<ul class="nav">



<li><router-link to="/list1">list1</router-link></li>



<li><router-link to="/list2">list2</router-link></li>



<li><router-link to="/list3">list3</router-link></li>


</ul>


<h6>默认视图</h6>


<div class="view">



<router-view></router-view>


</div>


<h6>a视图</h6>


<div class="view">



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


</div>


<h6>b视图</h6>


<div class="view">



<router-view name="b"></router-view>


</div>

</div>
</template>

router配置:

routes: [
{


path: '/',


name: 'HelloWorld',


component: HelloWorld,


children:[



{




path:'',




components:{





default:List1,





a:List2,





b:List3




}



},



{




path:'list1',




components:{





default:List1,





a:List2,





b:List3




}



 },



 {




path:'list2',




components:{





default:List2,





a:List1,





b:List3




}



},



{




path:'list3',




components:{





default:List3,





a:List1,





b:List2




}



}


]

}
]

这样会让也面很灵活,可以研究一下

总结

以上所述是小编给大家介绍的vue 中 命名视图的用法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
JS location几个方法小姐
Jul 09 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
javascript的惯性运动实现代码实例
Sep 07 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
详解vue 命名视图
Aug 14 #Javascript
浅谈JS中this在各个场景下的指向
Aug 14 #Javascript
Vue路由模块化配置的完整步骤
Aug 14 #Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 #Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 #Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 #Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 #Javascript
You might like
PHP中数组的三种排序方法分享
2012/05/07 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python多项式回归的实现方法
2019/03/11 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
建党伟业电影观后感
2015/06/01 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS