详解vue 命名视图


Posted in Javascript onAugust 14, 2019

详解vue 命名视图

在views 创建 UserProfile.vue UserProfilePreview.vue文件

app.vue文件创建两个router-view :

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

两个router-link

<router-link to="/">Home</router-link> |
<router-link to="/profile">profile</router-link>|

在router.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

import UserProfile from './views/UserProfile.vue'

import UserProfilePreview from './views/UserProfilePreview.vue'

Vue.use(Router)

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{
 path: '/',
 name: 'home',
 component: Home
},
{
 path: '/profile',
 name: 'profile',
 components: {
  default: UserProfile,
  helper: UserProfilePreview
 }
}

]

})

当在浏览器窗口访问我们的命名视图时候

详解vue 命名视图

详解vue 命名视图

<router-view/><router-view name="helper"/>分别展示了对应的组件

总结:命名视图优点在于一个页面中相当于多个窗口,这些窗口我们可以根据

<router-link to="/">Home</router-link> |
<router-link to="/profile">profile</router-link>|的不同来展示不同的视图

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

Javascript 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
浅谈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
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 #Javascript
You might like
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php数据序列化测试实例详解
2017/08/12 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
化验室技术员岗位职责
2013/12/24 职场文书
小学语文国培感言
2014/03/04 职场文书
工程售后服务方案
2014/06/08 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
演讲开场白台词大全
2015/05/29 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android