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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
使用webpack打包koa2 框架app
Feb 02 Javascript
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模板引擎SMARTY
2006/10/09 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python删除特定文件的方法
2015/07/30 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
小学母亲节活动总结
2015/02/10 职场文书
初中语文教学随笔
2015/08/15 职场文书
PHP命令行与定时任务
2021/04/01 PHP
利用javaScript处理常用事件详解
2021/04/14 Javascript
python实现三阶魔方还原的示例代码
2021/04/28 Python
python常见的占位符总结及用法
2021/07/02 Python