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-router定义元信息meta操作
Dec 07 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP二维数组去重算法
2016/12/17 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python实现公司年会抽奖程序
2019/01/22 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python队列原理及实现方法示例
2019/11/27 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
班组长岗位职责
2014/03/03 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python
python神经网络Xception模型
2022/05/06 Python