在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)
利用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>
補(bǔ)充知識:導(dǎo)航鉤子有哪幾種,如何將數(shù)據(jù)傳入下一個(gè)點(diǎn)擊的路由頁面
1.全局導(dǎo)航守衛(wèi)
//前置鉤子router.beforeEach((to,from,next)=>{ //do something})//后置鉤子(沒有next參數(shù))router.afterEach((to, from)=>{ // do something})
2.路由獨(dú)享守衛(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)部直接進(jìn)行定義的
data(){ return{ pro:’產(chǎn)品’ }},beforeRouteEnter:(to,from,next)=>{ console.log(to) next(vm => { console.log(vm.pro) })}
注意:beforeRouteEnter不能獲取組件實(shí)例this,因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被創(chuàng)建出來,我們可以通過給next傳入一個(gè)回調(diào)來訪問組件實(shí)例,在導(dǎo)航被確認(rèn)時(shí),會(huì)執(zhí)行這個(gè)回調(diào),這時(shí)就可以訪問組件實(shí)例了。
僅僅是beforeRouterEnter支持給next傳遞回調(diào),其他兩個(gè)并不支持,因?yàn)槭O聝蓚€(gè)鉤子可以正常獲取組件實(shí)例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ù)不會(huì)在地址欄中顯示
query類似于get,頁面跳轉(zhuǎn)的時(shí)候,可以在地址欄看到參數(shù)
補(bǔ)充:
router為VueRouter實(shí)例,想要導(dǎo)航到不同url,則使用router.push方法
$route為當(dāng)前router跳轉(zhuǎn)對象,在里邊獲取name,path,query,params等數(shù)據(jù)
以上這篇在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. JSP數(shù)據(jù)交互實(shí)現(xiàn)過程解析2. 解決啟動(dòng)django,瀏覽器顯示“服務(wù)器拒絕訪問”的問題3. JavaMail 1.4 發(fā)布4. vue使用webSocket更新實(shí)時(shí)天氣的方法5. 淺談python出錯(cuò)時(shí)traceback的解讀6. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼7. Yii2.0引入CSS,JS文件方法8. Nginx+php配置文件及原理解析9. 關(guān)于HTML5的img標(biāo)簽10. 如何使用CSS3畫出一個(gè)叮當(dāng)貓
