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 >
|
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>
|
通过打印日志可以得出两个实例化的路由:
这样即可实现在不改变当前页面path的前提下加载其他路由中的views了。
以上就是vue 基于abstract 路由模式 实现页面内嵌的示例代码的详细内容,更多关于vue 实现页面内嵌的资料请关注服务器之家其它相关文章!
原文链接:https://segmentfault.com/a/1190000038464538