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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 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
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
JavaScript面向对象编程
2008/03/02 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
婚礼司仪主持词
2014/03/14 职场文书
委托协议书范本
2014/04/22 职场文书
高中生军训感言
2015/08/01 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python