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学习总结(超级详细)
Sep 04 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
js判断密码强度的方法
Mar 18 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
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python制作抖音代码舞
2019/04/07 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python中的句柄操作的方法示例
2019/06/20 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python extract及contains方法代码实例
2020/09/11 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
打架检讨书400字
2014/01/17 职场文书
保险公司晨会主持词
2014/03/22 职场文书
财产公证书样本
2014/04/04 职场文书
业务员岗位职责范本
2015/04/03 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书