详解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的一些注意
Dec 06 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Node对CommonJS的模块规范
Nov 06 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 类型转换函数intval
2009/06/20 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
js获取input标签的输入值实现代码
2013/08/05 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
vue多次循环操作示例
2019/02/08 Javascript
vue登录注册实例详解
2019/09/14 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
wxPython学习之主框架实例
2014/09/28 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
珍惜水资源建议书
2014/03/12 职场文书
小学一年级评语大全
2014/04/22 职场文书
三字经教学反思
2014/04/26 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
学习计划书怎么写
2014/09/15 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python