vue中如何引入html靜態(tài)頁面
vue中引入html靜態(tài)頁面
功能：系統(tǒ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時，頁面路由變成http://localhost:8081/#/two,再刷新頁面時會找不到該頁面。
<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)聽滾動事件實(shí)現(xiàn)動態(tài)錨點(diǎn)，獲取需要滾動的距離,可能個人技術(shù)有限，最終也沒有實(shí)現(xiàn)。so，用vue頁面不是那么的好，網(wǎng)上搜了一些方法也沒有實(shí)現(xiàn)，由于時間問題，就放棄這種方法了。再者幫助說明，需要打開新的標(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ā)版到測試環(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)問題也解決了，順帶貼個點(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)目中追加模塊時遇到了一些需求，追加模塊的模型做好了，但是將模型轉(zhuǎn)換成真正的頁面代碼需要一段時間，而客戶需要現(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)
第一種方法雖然簡單快捷還不容易出錯，但有限制，如果是在組件內(nèi)點(diǎn)擊跳轉(zhuǎn)，會受到父組件的影響（容易變成真實(shí)頁面內(nèi)的某一父元素框內(nèi)嵌套了整個靜態(tài)頁面）。往往有時候，需要再點(diǎn)擊后，將整個頁面替換成靜態(tài)頁面，這時，window.open就發(fā)揮作用
以下內(nèi)容為網(wǎng)絡(luò)轉(zhuǎn)載
（1）語法部分：
window.open([URL], [窗口名稱], [參數(shù)字符串])
（2）參數(shù)說明：
① URL：可選參數(shù)，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑。如果省略這個參數(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)建一個，要想創(chuàng)建多個窗口則 name 不能相同。
4.name 不能包含有空格。
③ 參數(shù)字符串：可選參數(shù)，設(shè)置窗口參數(shù)，各參數(shù)用逗號隔開。
參數(shù)表：
解決方法：
（1）將需要跳轉(zhuǎn)的靜態(tài)html頁面文件放入到public中去（必須放到靜態(tài)文件目錄下，否則會被webpack解碼導(dǎo)致出錯）
注意！如果此靜態(tài)頁面含有css和js文件，要打包放進(jìn)同一個新建文件夾內(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)你在輸入路徑時，用vscode會自動幫你列出下一個目錄，但如果你跟他一個個往下選擇的化，會導(dǎo)致跳轉(zhuǎn)404報(bào)錯
原因是，vue封裝時初始路徑默認(rèn)為public，所以不用加/public。
此方法問題也有很多，比如跳轉(zhuǎn)后，完全變成靜態(tài)頁面，想要后退只有點(diǎn)擊瀏覽器的后退，沒有別的操作方法，如果有大神會在原型靜態(tài)文件進(jìn)行修改，或者有更好的引入方法，請留言！
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3在自定義hooks中使用useRouter報(bào)錯的解決方案
這篇文章主要介紹了vue3在自定義hooks中使用useRouter報(bào)錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
Vue實(shí)現(xiàn)天氣預(yù)報(bào)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)天氣預(yù)報(bào)小應(yīng)用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團(tuán)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在我們用vue時,我們經(jīng)常用到一個方法是this.$nextTick,相信你也用過,我常用的場景是在進(jìn)行獲取數(shù)據(jù)后,需要對新視圖進(jìn)行下一步操作或者其他操作時,發(fā)現(xiàn)獲取不到dom,這篇文章主要給大家介紹了關(guān)于$nextTick的相關(guān)資料,需要的朋友可以參考下2021-07-07
SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
下面小編就為大家分享一篇解決iview打包時UglifyJs報(bào)錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03