利用iframe

top:導(dǎo)航欄的height

left:左側(cè)菜單欄的width

src:右側(cè)頁面要嵌入的外部網(wǎng)站

<template> <div> <iframe src='https://www.iconfont.cn/' scrolling='no' frameborder='0' style='position:absolute;top:64px;left: 240px;right:0px;bottom:100px;'></iframe> </div></template> <script> export default { data () { return { } }, mounted(){ /** * iframe-寬高自適應(yīng)顯示 */ function changeMobsfIframe(){ const mobsf = document.getElementById(’mobsf’); const deviceWidth = document.body.clientWidth; const deviceHeight = document.body.clientHeight; mobsf.style.width = (Number(deviceWidth)-240) + ’px’; //數(shù)字是頁面布局寬度差值 mobsf.style.height = (Number(deviceHeight)-64) + ’px’; //數(shù)字是頁面布局高度差 } changeMobsfIframe() window.onresize = function(){ changeMobsfIframe() } } }</script>

補充知識：導(dǎo)航鉤子有哪幾種，如何將數(shù)據(jù)傳入下一個點擊的路由頁面

1.全局導(dǎo)航守衛(wèi)

//前置鉤子router.beforeEach((to,from,next)=>{ //do something})//后置鉤子(沒有next參數(shù))router.afterEach((to, from)=>{ // do something})

2.路由獨享守衛(wèi)

const router = new VueRouter({ routes: [ { path: ’/file’, component: File, beforeEnter: (to, from, next)=>{ //do something } } ]})

3.組件內(nèi)的導(dǎo)航鉤子

組件內(nèi)的導(dǎo)航鉤子主要有三種，beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它們是直接在路由組件內(nèi)部直接進行定義的

data(){ return{ pro:’產(chǎn)品’ }},beforeRouteEnter:(to,from,next)=>{ console.log(to) next(vm => { console.log(vm.pro) })}

注意：beforeRouteEnter不能獲取組件實例this，因為當(dāng)守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建出來，我們可以通過給next傳入一個回調(diào)來訪問組件實例，在導(dǎo)航被確認(rèn)時，會執(zhí)行這個回調(diào)，這時就可以訪問組件實例了。

僅僅是beforeRouterEnter支持給next傳遞回調(diào)，其他兩個并不支持，因為剩下兩個鉤子可以正常獲取組件實例this。

4.params和query

params傳參

this.$router.push({ name: ’detail’, params: { name: ’xiaoming’ } });//接收this.$route.params.name

query

this.$router.push({ path: ’/detail’, query:{ name: ’xiaoming’ }});//接收this.$route.query.id

query和params的區(qū)別

params只能用name來引入路由，query既可以用name又可以用path（通常是path）

params類似于post方法，參數(shù)不會在地址欄中顯示

query類似于get，頁面跳轉(zhuǎn)的時候，可以在地址欄看到參數(shù)

補充：

router為VueRouter實例，想要導(dǎo)航到不同url，則使用router.push方法

$route為當(dāng)前router跳轉(zhuǎn)對象，在里邊獲取name,path,query,params等數(shù)據(jù)

以上這篇在vue中嵌入外部網(wǎng)站的實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。