vue 基于abstract 路由模式 实现页面内嵌的示例代码


Posted in Vue.js onDecember 14, 2020

abstract 路由模式

abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由path,这就利用到了abstract这种与浏览器分离的路由模式。

路由示例

export const routes = [
 {
  path: "/",
  redirect: "abstract-route",
 },
 {
  path: "/embed-route",
  name: "embedded",
  component: () =>
   import(/* webpackChunkName: "embed" */ "../views/embed.vue"),
 },
 {
  path: "/abstract-route",
  name: "abstract",
  component: () =>
   import(/* webpackChunkName: "abstract" */ "../views/abstract.vue"),
 },
];

const router = new VueRouter({
 mode: "history",
 base: process.env.BASE_URL,
 routes,
});

本次示例有两个路由,分别为abstract,embedded,其中abstract视图上展开一个抽屉,抽屉当中显示embedded的视图。即:

<template>
 <div>
  <RouterDrawer
   :visible.sync="visible"
   :path="{ name: 'embedded' }"
   size="50%"
   title="drawer comps"
  ></RouterDrawer>
  <el-button @click="visible = true">open drawer</el-button>
 </div>
</template>


// embedded views
<template>
 <div>
  embedded views
 </div>
</template>

vue 基于abstract 路由模式 实现页面内嵌的示例代码

router-drawer 封装

当前项目默认是history 的路由模式,因此在进入abstract页面时,浏览器Url为http://127.0.0.1:8010/abstract-route,而router-drawer要做的是在此基础上,重新实例化一个abstract模式的路由,然后在组件当中利用<router-view />去挂载要被内嵌的目标页面。即:

<template>
 <el-drawer
  :visible.sync="visible"
  v-bind="$attrs"
  :before-close="handleClose"
 >
  <router-view />
 </el-drawer>
</template>
<script>
import { routes } from "../router/index";
import VueRouter from "vue-router";

export default {
 name: "router-drawer",
 props: {
  path: {
   type: Object,
   required: true,
  },
  visible: {
   type: Boolean,
   required: true,
   default: false,
  },
 },
  // 此处实例化一个新的router来配合当前页面的router-view
 router: new VueRouter({
  mode: "abstract",
  base: "/",
  routes,
 }),
 methods: {
  handleClose() {
   this.$emit("update:visible", false);
  },
 },
 mounted() {
  console.log("drawer router", this.$router);
  this.$router.push(this.path);
 },
};
</script>

通过打印日志可以得出两个实例化的路由:

vue 基于abstract 路由模式 实现页面内嵌的示例代码

这样即可实现在不改变当前页面path的前提下加载其他路由中的views了。

代码示例

以上就是vue 基于abstract 路由模式 实现页面内嵌的示例代码的详细内容,更多关于vue 实现页面内嵌的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
You might like
PHP中实现进程间通讯
2006/10/09 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
js类型检查实现代码
2010/10/29 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python实现TF-IDF算法解析
2018/01/02 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
实习协议书
2015/01/27 职场文书
高中教师个人总结
2015/02/10 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
详解TypeScript的基础类型
2022/02/18 Javascript