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