欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在同一個(gè)Vue項(xiàng)目中的不同vue和HTML頁(yè)面之間進(jìn)行跳轉(zhuǎn)方式

 更新時(shí)間：2024年03月06日 09:11:29   作者：奶糖 肥晨  
這篇文章主要介紹了在同一個(gè)Vue項(xiàng)目中的不同vue和HTML頁(yè)面之間進(jìn)行跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

在同一個(gè)Vue項(xiàng)目中的不同vue和HTML頁(yè)面之間進(jìn)行跳轉(zhuǎn)

文章重點(diǎn)

在你的Vue項(xiàng)目中創(chuàng)建一個(gè)新的Vue組件，用于包含你要跳轉(zhuǎn)的目標(biāo)HTML頁(yè)面。

確保這個(gè)組件的模板文件和JavaScript文件都正確地組織在你的項(xiàng)目中。

如果你要跳轉(zhuǎn)到的目標(biāo)HTML頁(yè)面不是Vue組件，你可以將其作為靜態(tài)文件放置在項(xiàng)目的public文件夾中。

然后，你可以直接使用相對(duì)路徑或絕對(duì)路徑來(lái)訪問(wèn)該頁(yè)面。

例如，如果你的目標(biāo)HTML頁(yè)面位于public/other-page.html，你可以直接在瀏覽器中訪問(wèn)http://localhost:8080/other-page.html（假設(shè)你的開發(fā)服務(wù)器正在運(yùn)行在默認(rèn)的8080端口）。

請(qǐng)確保你在服務(wù)器配置中設(shè)置了正確的文件路徑和端口。

vue頁(yè)面代碼

vue-html：

  <div @click="handerVideo(1)">
            人臉識(shí)別
  </div>

methods：

 handerVideo(val) {
      window.location.href = `/static/Video.html`; // 這里替換成你想要跳轉(zhuǎn)的外部HTML頁(yè)面的URL
    },

vue跳轉(zhuǎn)頁(yè)面常用的幾種方法

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 ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失；配置path,刷新頁(yè)面id會(huì)保留。
// html 取參 $route.params.id    script 取參 this.$route.params.id
 
3.帶query參數(shù)
<router-link :to="{name:'home', query: {id:10001}}"> 
// query傳參數(shù) (類似get,url后面會(huì)顯示參數(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 ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
// html 取參 $route.params.id    script 取參 this.$route.params.id
 
4. query和params區(qū)別
query類似get, 跳轉(zhuǎn)之后頁(yè)面url后面會(huì)拼接參數(shù),類似?id=123456, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在
params類似post, 跳轉(zhuǎn)之后頁(yè)面url后面不會(huì)拼接參數(shù), 但是刷新頁(yè)面id會(huì)消失。

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 ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
// html 取參 $route.params.id    script 取參 this.$route.params.id
 
4. query和params區(qū)別
query類似get, 跳轉(zhuǎn)之后頁(yè)面url后面會(huì)拼接參數(shù),類似?id=123456, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在
params類似post, 跳轉(zhuǎn)之后頁(yè)面url后面不會(huì)拼接參數(shù), 但是刷新頁(yè)面id會(huì)消失。

4.this.$router.go(n)

<button @click="upPage">[上一頁(yè)]</button>
<button @click="downPage">[下一頁(yè)]</button>
upPage() {
this.$router.go(-1);  // 后退一步記錄，等同于 history.back()
},
downPage() {
this.$router.go(1);   // 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()
}

5.this.$router.push()、 this.$router.replace()、 this.$router.go(n)三者區(qū)別

  • this.$router.push

跳轉(zhuǎn)到指定url路徑，并向history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面。

  • this.$router.replace

跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄，點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上個(gè)頁(yè)面 (直接替換當(dāng)前頁(yè)面)。

  • this.$router.go(n)

向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論