利用iframe

top:導航欄的height

left:左側菜單欄的width

src:右側頁面要嵌入的外部網站

<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-寬高自適應顯示 */ function changeMobsfIframe(){ const mobsf = document.getElementById(’mobsf’); const deviceWidth = document.body.clientWidth; const deviceHeight = document.body.clientHeight; mobsf.style.width = (Number(deviceWidth)-240) + ’px’; //數字是頁面布局寬度差值 mobsf.style.height = (Number(deviceHeight)-64) + ’px’; //數字是頁面布局高度差 } changeMobsfIframe() window.onresize = function(){ changeMobsfIframe() } } }</script>

補充知識：導航鉤子有哪幾種，如何將數據傳入下一個點擊的路由頁面

1.全局導航守衛

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

2.路由獨享守衛

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

3.組件內的導航鉤子

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

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

注意：beforeRouteEnter不能獲取組件實例this，因為當守衛執行前，組件實例還沒被創建出來，我們可以通過給next傳入一個回調來訪問組件實例，在導航被確認時，會執行這個回調，這時就可以訪問組件實例了。

僅僅是beforeRouterEnter支持給next傳遞回調，其他兩個并不支持，因為剩下兩個鉤子可以正常獲取組件實例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的區別

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

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

query類似于get，頁面跳轉的時候，可以在地址欄看到參數

補充：

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

$route為當前router跳轉對象，在里邊獲取name,path,query,params等數據

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