个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue 基于abstract 路由模式 实现页面内嵌的示例代码由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

abstract 路由模式

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

路由示例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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的视图。即:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< 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 />去挂载要被内嵌的目标页面。即:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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 实现页面内嵌的资料请关注我其它相关文章！ 。

原文链接：https://segmentfault.com/a/1190000038464538 。

最后此篇关于vue 基于abstract 路由模式 实现页面内嵌的示例代码的文章就讲到这里了,如果你想了解更多关于vue 基于abstract 路由模式 实现页面内嵌的示例代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： SpringBoot上传和下载文件的原理解析
文章推荐： DELL R730服务器配置RAID与安装服务器系统以及域的控制详细图文教程
文章推荐： Java的枚举,注解和反射(二)
文章推荐： 浅谈JSON5解决了JSON的两大痛点
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com