详解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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue中封装input组件的实例详解
Oct 17 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
php构造函数与析构函数
2016/04/23 PHP
php实现留言板功能
2017/03/05 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript中对对层的控制
2006/12/29 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
github配置使用指南
2014/11/18 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
关于JavaScript轮播图的实现
2021/11/20 Javascript
详解Python flask的前后端交互
2022/03/31 Python