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组件简易模拟实现购物车
Dec 21 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue 实现上传组件
May 31 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
关于vue-router-link选择样式设置
Apr 30 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
表单提交验证类
2006/07/14 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
JS中的BOM应用
2018/02/02 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Python六大开源框架对比
2015/10/19 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
详解python中__name__的意义以及作用
2019/08/07 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
如何利用find命令查找文件
2015/02/07 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
蜜蜂引路教学反思
2014/02/04 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
企业文明单位申报材料
2014/05/16 职场文书
本科毕业生求职信
2014/06/15 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
学历证明范文
2015/06/16 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
golang日志包logger的用法详解
2021/05/05 Golang
详解nodejs内置模块
2021/05/06 NodeJs
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS