vue-router命名视图的使用讲解


Posted in Javascript onJanuary 19, 2019

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

如果按照他解释的这么简单的话,完全可以在根组件app.vue里直接引入sidebar组件,注册,渲染。没必要多此一举。既然可以在route.config.js里面灵活配置,那就可以灵活的用。官网的例子:

<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> 
const router = new VueRouter({ 
  routes: [ 
    { 
      path: '/', 
      components: { default: Foo, a: Bar, b: Baz } 
    } 
  ] 
})

在app.vue里面可以多注册几个命名视图,就可以

<template> 
  <div id="app"> 
    <router-view></router-view> 
    <router-view name="nav"></router-view> 
    <router-view name="side"></router-view> 
  </div> 
</template>
{ 
  path: '/home', 
  name: 'Home', 
  components: { 
    default: Home, 
    nav: Nav,//不给的话就不渲染 
    side: Side 
  }, 
  children: [ 
    { path: '/', component: Home },//不给的话就匹配不到子组件,就不渲染 
    { path: 'post', component: Post } 
  ] 
}

一、简单的命名视图(就是点击不同的路由跳转后来实现显示多个组件内容)

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

效果:

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

二、嵌套路由视图(同时满足嵌套路由的规则,还要满足视图的规则)

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

vue-router命名视图的使用讲解

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
babel基本使用详解
Feb 17 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
原生js实现3D轮播图
Mar 21 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 #Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 #Javascript
详解vue-router导航守卫
Jan 19 #Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 #Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP 面向对象详解
2012/09/13 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
JS查看对象功能代码
2008/04/25 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python3内置模块random随机方法小结
2019/07/13 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
检察官就职演讲稿
2014/01/13 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
工作求职自荐信
2014/06/13 职场文书
大型公益活动策划方案
2014/08/20 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android
TypeScript 内置高级类型编程示例
2022/09/23 Javascript