vue自定义标签和单页面多路由的实现代码


Posted in Javascript onMay 03, 2020

1. 自定义组件标签(如在主页插入顶栏/侧边栏等)

  比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vuescript中导入Header.vue

import vHead from "./Header.vue"; 
 #导入Header.vue为vHead,注意路径,
Header.vue和Home.vue
在同一路径下用./

然后导出组件:

export default {
 components: {
  vHead,
 }
 };

然后即可在Home.vue<template>中直接插入使用了:

<vHead></vHead>

2. 单页面多路由实现

  单页面多路由就是在同一页面上显示不同路由的内容,通过设置为子路由的方式,然后通过<router-view></router-view>,作为子路由的插入点。访问对应路由时候,会将该路由内容渲染到<router-view></router-view>位置。

比如:要在Home.vue页面上显示HomeDesk.vue等页面:

1.通过设置./router/index.js路由中的children属性,设置HomeDesk.vue为Home.vue的子路由

const routes = [ 
 {
 path: '/',
 name: 'home',
 component: () => import('../components/common/Home.vue'), #注意引用路径
 children: [
 {
  path: '/homedesk',
  name: 'homedesk',
  component: () => import('../components/page/HomeDesk.vue') #注意引用路径
 },}]

2.在HomeDesk.vue页面相应位置添加<router-view></router-view>,访问对应路由/homedesk时,即会将该路由内容渲染到HomeDesk.vue对应位置。

到此这篇关于vue自定义标签和单页面多路由实现的文章就介绍到这了,更多相关vue 自定义标签单页面多路由内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
js如何取消事件冒泡
Sep 23 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
理解Javascript的call、apply
Dec 16 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
jQuery实现电梯导航模块
Dec 22 jQuery
JavaScript函数重载操作实例浅析
May 02 #Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 #Javascript
react-router-dom 嵌套路由的实现
May 02 #Javascript
在react中使用vue的状态管理的方法示例
May 02 #Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 #Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 #Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
Javascript Math对象
2009/08/13 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
python中列表和元组的区别
2017/12/18 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
技术人员面试提纲
2013/11/28 职场文书
英语感恩演讲稿
2014/01/14 职场文书
大学毕业寄语大全
2014/04/10 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
天地会口号
2014/06/17 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
加薪通知
2015/04/25 职场文书
2016小学新学期寄语
2015/12/04 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技