在同一個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ù)器正在運行在默認的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ù)或負整數(shù)。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用cookies和crypto-js實現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實現(xiàn)密碼的加密與記住密碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。2018-10-10VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class)
這篇文章主要介紹了VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題
這篇文章主要介紹了解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11