利用Vue Router中的router-view組件的name屬性
再結(jié)合RouteConfig中的compoents,在頁面中動態(tài)地配置當前頁面路由的components值,然后再在頁面進行跳轉(zhuǎn),具體例子如下:
<!-- default 默認視圖組件 -->
<router-view/>
<!-- 通過判斷頁面query中的isModal參數(shù)值來控制彈出 -->
<div v-if="$route.query.isModal==='yes'" class="modal-wrapper" @click="$router.back()">
<!-- modal 模態(tài)框的視圖組件 -->
<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為將要彈出的模態(tài)框內(nèi)容的vue組件
// 路由添加?isModal=yes進行跳轉(zhuǎn)
this.$router.push({
path,
query: {
...query,
isModal: 'yes',
}
});
}