详解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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
js中的数组对象排序分析
Dec 11 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 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
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 #Javascript
You might like
PHP strtr() 函数使用说明
2008/11/21 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
信息科学与技术专业求职信范文
2014/02/20 职场文书
创建青年文明号材料
2014/05/09 职场文书
市场营销专业自荐书
2014/06/10 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python