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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
Augularjs-起步详解
Jul 08 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
javascript中json基础知识详解
Jan 19 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
微信小程序实现拍照和相册选取图片
May 09 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
YB217、YB235、YB400浅听
2021/03/02 无线电
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
函数式 JavaScript(一)简介
2014/07/07 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
创业大赛策划书
2014/03/01 职场文书
市场总经理岗位职责
2014/04/11 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书