vue中如何引入html靜態(tài)頁面
vue中引入html靜態(tài)頁面
功能：系統(tǒng)中需增加幫助中心頁面，由于頁面較長(zhǎng)，需要實(shí)現(xiàn)錨點(diǎn)定位跳轉(zhuǎn)。
1、開始用的路由方式，首先在router文件夾index.js里面配置靜態(tài)路由，代碼如下
{
path: '/help',
component: () => import('@/page/help'),
hidden: true,
}
//頁面代碼
<div class="top_help" @click="jumpTo('/help')">幫助中心</div>
jumpTo(url){
this.$router.push({path:url})
}2、給頁面標(biāo)簽加錨點(diǎn)，代碼如下，發(fā)現(xiàn)錨點(diǎn)實(shí)現(xiàn)了，可是頁面路由變了,比如點(diǎn)擊標(biāo)題2時(shí)，頁面路由變成http://localhost:8081/#/two,再刷新頁面時(shí)會(huì)找不到該頁面。
<ul class="help_list" >
<li :class="n==1?'active':''" @click="n=1"><a href="#one" rel="external nofollow" ><span>標(biāo)題1</span></a></li>
<li :class="n==2?'active':''" @click="n=2"><a href="#two" rel="external nofollow" ><span>標(biāo)題2</span>
<dl>
<dd
v-for="(item, index) in contractList"
:key="index"
:class="m==index?'now':''" @click="m=index"><a :href="`#two${index+1}`" rel="external nofollow" >{{item}}</a></dd>
</dl>
</a>
</li>
</ul>
<div class="help_next" id="one">
<div class="help_box" v-show="n==1" >
<div class="help_tit"><img src="@/assets/images/help/tit_1.png"></div>
<div class="help_img help_martop">
<img src="@/assets/images/help/tab1_bg.png">
</div>
</div>
</div>
<div class="help_next" id="two">
<div class="help_box" v-show="n==2">
<div class="help_tit"><img src="@/assets/images/help/tit_2.png"></div>
<div class="help_img help_martop">
<p id="two1"><img src="@/assets/images/help/tab2_1.png"></p>
<p id="two2"><img src="@/assets/images/help/tab2_2.png"></p>
<p id="two3"><img src="@/assets/images/help/tab2_3.png"></p>
<p id="two4"><img src="@/assets/images/help/tab2_4.png"></p>
</div>
</div>
</div>
</div>
data(){
return {
n:1,
m:0,
contractList:['標(biāo)題1','標(biāo)題2','標(biāo)題3','標(biāo)題4'],
}
},換種方式用監(jiān)聽滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)，獲取需要滾動(dòng)的距離,可能個(gè)人技術(shù)有限，最終也沒有實(shí)現(xiàn)。so，用vue頁面不是那么的好，網(wǎng)上搜了一些方法也沒有實(shí)現(xiàn)，由于時(shí)間問題，就放棄這種方法了。再者幫助說明，需要打開新的標(biāo)簽頁才行，最后就用html來做。
3、在static里面新增index.html頁面，新建css，images，js文件夾，
4、 在vue頁面寫以下代碼，跳轉(zhuǎn)到html頁面
<div class="top_help"><a href="../../../../static/index.html" rel="external nofollow" target="_blank">幫助中心</a></div>
5、發(fā)版到測(cè)試環(huán)境，發(fā)現(xiàn)圖片和樣式無法加載，需要把圖片和樣式路徑修改,
把../css/index.css改成/static/css/index.css
<link rel="stylesheet" href="/static/css/index.css" rel="external nofollow" >
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<body>
<div class="help_bg" ref="box">
<div class="help_topbg"><img src="/static/images/topbg.png"></div>
</div>
</body>6、webpack中config配置文件
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])5、點(diǎn)擊就可以跳轉(zhuǎn)新的頁面，并且錨點(diǎn)問題也解決了，順帶貼個(gè)點(diǎn)擊菜單，給菜單加當(dāng)前樣式
$(document).ready(function(){
$(".help_list .yiji").each(function(){
$(this).click(function(){
$(".help_list .yiji").parent().removeClass("active");
$(this).parent().addClass("active");
});
});
});vue中引入html靜態(tài)頁面的一些問題
在項(xiàng)目中追加模塊時(shí)遇到了一些需求，追加模塊的模型做好了，但是將模型轉(zhuǎn)換成真正的頁面代碼需要一段時(shí)間，而客戶需要現(xiàn)在項(xiàng)目里看到靜態(tài)效果，就需要用到一些方法將vue引入靜態(tài)頁面。
1.最直接的方法就是在vue中嵌入html文件
通過iframe進(jìn)行引入，如下圖
在router中的index.js進(jìn)行設(shè)置路由跳轉(zhuǎn)（文件名為outfall.vue）
export default new Router({
routes:[
{
path:'/outfall', //路由路勁
name:'outfall', //名稱
component:outFall //跳轉(zhuǎn)組件名
}
]
})然后通過click方式進(jìn)行引入跳轉(zhuǎn)
<el-button type="primary" @click="this.$router.replace("/outfall")"></ek-button>2.第二種方法window.open(url)
第一種方法雖然簡(jiǎn)單快捷還不容易出錯(cuò)，但有限制，如果是在組件內(nèi)點(diǎn)擊跳轉(zhuǎn)，會(huì)受到父組件的影響（容易變成真實(shí)頁面內(nèi)的某一父元素框內(nèi)嵌套了整個(gè)靜態(tài)頁面）。往往有時(shí)候，需要再點(diǎn)擊后，將整個(gè)頁面替換成靜態(tài)頁面，這時(shí)，window.open就發(fā)揮作用
以下內(nèi)容為網(wǎng)絡(luò)轉(zhuǎn)載
（1）語法部分：
window.open([URL], [窗口名稱], [參數(shù)字符串])
（2）參數(shù)說明：
① URL：可選參數(shù)，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑。如果省略這個(gè)參數(shù)，或者它的值是空字符串，那么窗口就不顯示任何文檔。
② 窗口名稱：可選參數(shù)，被打開窗口的名稱。
1.該名稱由字母、數(shù)字和下劃線字符組成。
2."_top"、"_blank"、"_selft"具有特殊意義的名稱。
_blank：在新窗口顯示目標(biāo)網(wǎng)頁_self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁_top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁
3.相同 name 的窗口只能創(chuàng)建一個(gè)，要想創(chuàng)建多個(gè)窗口則 name 不能相同。
4.name 不能包含有空格。
③ 參數(shù)字符串：可選參數(shù)，設(shè)置窗口參數(shù)，各參數(shù)用逗號(hào)隔開。
參數(shù)表：
解決方法：
（1）將需要跳轉(zhuǎn)的靜態(tài)html頁面文件放入到public中去（必須放到靜態(tài)文件目錄下，否則會(huì)被webpack解碼導(dǎo)致出錯(cuò)）
注意！如果此靜態(tài)頁面含有css和js文件，要打包放進(jìn)同一個(gè)新建文件夾內(nèi)，路徑記得要修改
（2）在所需進(jìn)行點(diǎn)擊跳轉(zhuǎn)的地方設(shè)置跳轉(zhuǎn)即可
<el-button type="primary" @click="window.open('/outfall/outfall.html','_self')"></ek-button>注意點(diǎn)：當(dāng)你在輸入路徑時(shí)，用vscode會(huì)自動(dòng)幫你列出下一個(gè)目錄，但如果你跟他一個(gè)個(gè)往下選擇的化，會(huì)導(dǎo)致跳轉(zhuǎn)404報(bào)錯(cuò)
原因是，vue封裝時(shí)初始路徑默認(rèn)為public，所以不用加/public。
此方法問題也有很多，比如跳轉(zhuǎn)后，完全變成靜態(tài)頁面，想要后退只有點(diǎn)擊瀏覽器的后退，沒有別的操作方法，如果有大神會(huì)在原型靜態(tài)文件進(jìn)行修改，或者有更好的引入方法，請(qǐng)留言！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
在本篇文章中小編給大家整理的是一篇關(guān)于vue-devtools安裝使用的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳到后臺(tái)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue-editor-bridge報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue-editor-bridge報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)動(dòng)態(tài)查詢規(guī)則生成組件
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會(huì)碰到的一種需求場(chǎng)景，本文主要介紹了Vue動(dòng)態(tài)查詢規(guī)則生成組件，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue中的 $slot 獲取插槽的節(jié)點(diǎn)實(shí)例
今天小編就為大家分享一篇vue中的 $slot 獲取插槽的節(jié)點(diǎn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue數(shù)據(jù)代理的實(shí)現(xiàn)流程逐步講解
通過一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象中的屬性的操作（讀/寫），就是數(shù)據(jù)代理。要搞懂Vue數(shù)據(jù)代理這個(gè)概念，那我們就要從Object.defineProperty()入手，Object.defineProperty()是Vue中比較底層的一個(gè)方法，在數(shù)據(jù)劫持，數(shù)據(jù)代理以及計(jì)算屬性等地方都或多或少的用到了本函數(shù)2023-01-01
這篇文章主要介紹了vue使用json最簡(jiǎn)單的兩種方式分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue響應(yīng)式原理深入解析及注意事項(xiàng)
Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng) —— 模型只是普通對(duì)象，修改它則更新視圖。下面這篇文章主要給大家深入講解了關(guān)于Vue的響應(yīng)式原理，以及Vue響應(yīng)式的一些注意事項(xiàng)，需要的朋友下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02