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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
JS实现瀑布流布局
Oct 21 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
详解Vue之计算属性
Jun 20 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
第十一节--重载
2006/11/16 PHP
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
用header 发送cookie的php代码
2007/03/16 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
使用python实现个性化词云的方法
2017/06/16 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
python实现猜拳游戏项目
2020/11/30 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
一篇.NET面试题
2014/09/29 面试题
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
教师专业自荐信
2014/05/31 职场文书