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项目利用axios请求接口下载excel
Nov 17 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
Vue操作Storage本地化存储
Apr 29 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
我的论坛源代码(六)
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python实现二分查找算法
2020/09/18 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
单位委托书范本
2014/04/04 职场文书
小学毕业演讲稿
2014/04/25 职场文书
工资证明范本
2015/06/12 职场文书
运动会入场词
2015/07/18 职场文书
节水宣传标语口号
2015/12/26 职场文书