在同一個Vue項目中的不同vue和HTML頁面之間進行跳轉(zhuǎn)方式
更新時間：2024年03月06日 09:11:29 作者：奶糖 肥晨
這篇文章主要介紹了在同一個Vue項目中的不同vue和HTML頁面之間進行跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
在同一個Vue項目中的不同vue和HTML頁面之間進行跳轉(zhuǎn)
文章重點
在你的Vue項目中創(chuàng)建一個新的Vue組件，用于包含你要跳轉(zhuǎn)的目標(biāo)HTML頁面。
確保這個組件的模板文件和JavaScript文件都正確地組織在你的項目中。
如果你要跳轉(zhuǎn)到的目標(biāo)HTML頁面不是Vue組件，你可以將其作為靜態(tài)文件放置在項目的public文件夾中。
然后，你可以直接使用相對路徑或絕對路徑來訪問該頁面。
例如，如果你的目標(biāo)HTML頁面位于public/other-page.html，你可以直接在瀏覽器中訪問http://localhost:8080/other-page.html（假設(shè)你的開發(fā)服務(wù)器正在運行在默認(rèn)的8080端口）。
請確保你在服務(wù)器配置中設(shè)置了正確的文件路徑和端口。
vue頁面代碼
vue-html：
<div @click="handerVideo(1)">
人臉識別
</div>
methods：
handerVideo(val) {
window.location.href = `/static/Video.html`; // 這里替換成你想要跳轉(zhuǎn)的外部HTML頁面的URL
},
vue跳轉(zhuǎn)頁面常用的幾種方法
1.router-link跳轉(zhuǎn)
1.不帶參數(shù)
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始；如果不帶'/'，則從當(dāng)前路由開始。
2.帶params參數(shù)
<router-link :to="{name:'home', params: {id:10001}}">
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請求,刷新頁面id會消失；配置path,刷新頁面id會保留。
// html 取參 $route.params.id script 取參 this.$route.params.id
3.帶query參數(shù)
<router-link :to="{name:'home', query: {id:10001}}">
// query傳參數(shù) (類似get,url后面會顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id script 取參 this.$route.query.id
2.this.$router.push()
1. 不帶參數(shù)
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query傳參
this.$router.push({name:'home',query: {id:'10001'}})
this.$router.push({path:'/home',query: {id:'10001'}})
// html 取參 $route.query.id script 取參 this.$route.query.id
3. params傳參
this.$router.push({name:'home',params: {id:'10001'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id script 取參 this.$route.params.id
4. query和params區(qū)別
query類似get, 跳轉(zhuǎn)之后頁面url后面會拼接參數(shù),類似?id=123456, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在
params類似post, 跳轉(zhuǎn)之后頁面url后面不會拼接參數(shù), 但是刷新頁面id會消失。
3.this.$router.replace()
1. 不帶參數(shù)
this.$router.replace('/home')
this.$router.replace({name:'home'})
this.$router.replace({path:'/home'})
2. query傳參
this.$router.replace({name:'home',query: {id:'10001'}})
this.$router.replace({path:'/home',query: {id:'10001'}})
// html 取參 $route.query.id script 取參 this.$route.query.id
3. params傳參
this.$router.replace({name:'home',params: {id:'10001'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id script 取參 this.$route.params.id
4. query和params區(qū)別
query類似get, 跳轉(zhuǎn)之后頁面url后面會拼接參數(shù),類似?id=123456, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在
params類似post, 跳轉(zhuǎn)之后頁面url后面不會拼接參數(shù), 但是刷新頁面id會消失。
4.this.$router.go(n)
<button @click="upPage">[上一頁]</button>
<button @click="downPage">[下一頁]</button>
upPage() {
this.$router.go(-1); // 后退一步記錄，等同于 history.back()
},
downPage() {
this.$router.go(1); // 在瀏覽器記錄中前進一步，等同于 history.forward()
}
5.this.$router.push()、 this.$router.replace()、 this.$router.go(n)三者區(qū)別
this.$router.push
跳轉(zhuǎn)到指定url路徑，并向history棧中添加一個記錄，點擊后退會返回到上一個頁面。
this.$router.replace
跳轉(zhuǎn)到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉(zhuǎn)到上個頁面 (直接替換當(dāng)前頁面)。
this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個頁面，n可為正整數(shù)或負(fù)整數(shù)。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Capacitor將Vue項目轉(zhuǎn)換為Android App的操作步驟
這篇文章主要介紹了如何將Vue項目轉(zhuǎn)換為Android應(yīng)用,包括設(shè)置開發(fā)環(huán)境、打包Vue項目、安裝和配置Capacitor,以及如何處理網(wǎng)絡(luò)請求和配置圖標(biāo),此外,還包括了如何編譯生成APK文件和處理可能的錯誤,需要的朋友可以參考下2025-10-10
這篇文章主要介紹了詳解使用vue實現(xiàn)tab操作,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了Vue實現(xiàn)購物小球拋物線的方法實例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue頁面布局與路由映射實戰(zhàn)教程之RouterView嵌套及動態(tài)組件生成詳解
文章介紹了布局組件在Vue應(yīng)用中的設(shè)計和使用,包括布局組件的核心作用、多層RouterView的嵌套布局、靜態(tài)組件與動態(tài)組件的區(qū)別,以及動態(tài)路由的優(yōu)勢,通過這些機制,可以實現(xiàn)界面的一致性、靈活的權(quán)限控制和菜單擴展,感興趣的朋友跟隨小編一起看看吧2026-01-01
今天給大家分享的是，如何在最短的時候內(nèi)實現(xiàn)右鍵菜單。高效實現(xiàn)需求，避免重復(fù)造輪子。感興趣的可以了解一下2021-10-10
這篇文章主要介紹了解決el-date-picker日期選擇控件少一天的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Python實現(xiàn)學(xué)生成績管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue3中使用vuex和vue-router的詳細(xì)步驟
這篇文章主要介紹了vue3中使用vuex和vue-router的步驟，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
vue3?+?Ant?Design?實現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
這篇文章主要介紹了vue3?+?Ant?Design?實現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12