利用Vue Router中的router-view
组件的name属性
再结合RouteConfig中的compoents
,在页面中动态地配置当前页面路由的components
值,然后再在页面进行跳转,具体例子如下:
<!-- default 默认视图组件 -->
<router-view/>
<!-- 通过判断页面query中的isModal参数值来控制弹出 -->
<div v-if="$route.query.isModal==='yes'" class="modal-wrapper" @click="$router.back()">
<!-- modal 模态框的视图组件 -->
<router-view name="modal"></router-view>
</div>
// 弹出modal
showModal: () => {
let { path, query, matched } = this.$route;
// 获取当前路由的配置
let matchRoute = matched[matched.length - 1];
// 设置当前路由的components中的modal所绑定的组件,用于展示的
matchRoute.components.modal = CustomModal; // CustomModal为将要弹出的模态框内容的vue组件
// 路由添加?isModal=yes进行跳转
this.$router.push({
path,
query: {
...query,
isModal: 'yes',
}
});
}