详解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 遍历json数组的实现代码
Sep 22 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
javascript实现在线客服效果
Jul 15 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
js实现随机点名程序
2020/09/17 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
高三自我鉴定范文
2013/10/19 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
保安岗位职责
2014/02/21 职场文书
初三学生个人自我评定
2014/04/06 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
少先队工作总结2015
2015/05/13 职场文书
纪检监察立案决定书
2015/06/24 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL