个人笔记-----Vue中多个router-view应用【如有不对,欢迎指正】
2019-05-02 20:37
369 查看
单个 <router-view/>
和多个 <router-view/>
的区别,
单个
<router-view/>只是一个区域的变化,不需要设置
name属性,在设置路由的时候单个
<router-view/>使用的是
component,
多个
<router-view/>里面需要设置一个
name属性,设置路由的时候单个
<router-view/>使用的是
components,
<div> <router-view/> <router-view class="left" name="nav" /> <router-view class="right" name="con" /> </div>
然后在
router.js中进行配置,注意:
component改成要
components,
components是一个对象了,
nav:AboutNav,左侧的
nav就是
<router-view name="nav" />标签里的
name属性值,
nav:AboutNav,右侧的
AboutNav就是引用组件时候
import AboutNav from './views/AboutNav.vue'中的
AboutNav。
import AboutCon from './views/AboutCon.vue' import AboutNav from './views/AboutNav.vue' { path: '/about', name: 'about', components: { nav:AboutNav, con:AboutCon } }
相关文章推荐
- 个人笔记-----Vue中与后台通信axios【如有不对,欢迎指正】
- 个人笔记-----Vue怎么玩,Vue就是这么玩【如有不对,欢迎指正】
- 个人笔记-----Vue中transition的过渡作用和transition-group【如有不对,欢迎指正】
- 个人练习----Vue中使用axios请求数据【如有不对,欢迎指正】
- 个人练习----Vue 封装操作localstorage 本地存储的方法【如有不对,欢迎指正】
- 自加自减运算符的错误使用和理解【个人学习笔记,如有错误欢迎指正】
- 各种猥琐的Java笔试/面试题目的答案(这是我自己测试得出的答案,如有不对的欢迎批评指正)
- Vue 2 中router-link 的应用不显示对应的router-view内容
- 对象/类,函数/方法 的区分(仅代表个人观点,如有偏差欢迎指正)
- 黑马程序员_温习 网络编辑四 (个人笔记)摘要(浏览器客户端介绍----消息头---URL(统一资源定位符)(应用层)----域名解析)
- VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(一)
- vue-router(2.0)之什么是路由以及使用步骤(笔记)
- vue-router单页应用简单示例(三)
- 用vue-cli 与vuex一步一步搭建一个笔记应用(四)
- 一个完整的vue应用 ( vuex+vue-router ) 起手
- Vue-router 官方文档笔记
- 2013年第四届蓝桥杯B组(C/C++)预赛题目及个人答案(欢迎指正)
- Vue笔记:使用 vuex 管理应用状态
- Vue学习笔记——Vue个人小结
- ASP.NET MVC学习笔记-ViewEngine 深入解析与应用实例