Vue實現(xiàn)路由跳轉(zhuǎn)至外界頁面
Vue路由跳轉(zhuǎn)至外界頁面
用法
如果使用路由是在 vue 頁面中來回跳轉(zhuǎn),可以使用 this.$router.push() 實現(xiàn),但是如果想用這種方法跳轉(zhuǎn)到外部鏈接就會報錯,因為外部頁面中是存在 HTTP 等前綴的。
解決辦法
1. 在 data 中定義好要跳轉(zhuǎn)的外部鏈接
data() { ?? ?return { ?? ??? ?url: 'http://www.baidu.com' ?? ?} }
2. 按鈕中創(chuàng)建單擊事件
<button @click='routeClick(url)'></button>
3. 函數(shù)實現(xiàn)
method: { ?? ?routeClick(e) { ?? ??? ?// 通過此方法可以使用 ?? ??? ?window.location.href = e; ?? ?} }
Vue路由跳轉(zhuǎn)頁面的幾種方式
1.聲明式導(dǎo)航router-link
// 注意:router-link中鏈接如果是'/'開始就是從根路由開始,如果開始不帶'/',則從當前路由開始。 <router-link :to="{name:'home'}"> ? <router-link :to="{path:'/home'}"> //name,path都行, 建議用name?
1.2
<router-link :to="{name:'home', params: {id:1}}"> <router-link :to="{name:'home', query: {id:1}}"> ? <router-link :to="/home/:id"> ? //傳遞對象 <router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>?
2.編程式導(dǎo)航 this.$router.push()
不帶參數(shù) this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'} 帶參數(shù) query傳參 1.路由配置: name: 'home', path: '/home' 2.跳轉(zhuǎn): this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) 3.獲取參數(shù) html取參: $route.query.id script取參: this.$route.query.id
3.params傳參
1.路由配置: name: 'home', path: '/home/:id'(或者path: '/home:id') 2.跳轉(zhuǎn): this.$router.push({name:'home',params: {id:'1'}}) 注意: // 只能用 name匹配路由不能用path // params傳參數(shù)(類似post) 路由配置 path: "/home/:id" 或者 path: "/home:id"否則刷新參數(shù)消失 3.獲取參數(shù) html取參:$route.params.id script取參:this.$route.params.id
4.直接通過path傳參
1.路由配置: name: 'home', path: '/home/:id' 2.跳轉(zhuǎn): this.$router.push({path:'/home/123'}) 或者: this.$router.push('/home/123') 3.獲取參數(shù): this.$route.params.id
5.this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個頁面,n可為正整數(shù)或負整數(shù)
6.跳轉(zhuǎn)頁面打開新窗口并攜帶參數(shù)
const routeData = this.$router.resolve({ ? ? ? ? ? ? ? ? path: `/workbench/customer_detail/${this.audioFrom.import_id}` ? ? ? ? ? ? }) window.open(routeData.href, '_blank')
7.跳轉(zhuǎn)新項目并攜帶參數(shù)
window.open(`https://hao123/#/workbench/customer_detail/${this.audioFrom.import_id}`)
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue webapp項目通過HBulider打包原生APP
這篇文章主要介紹了詳解Vue webapp項目通過HBulider打包原生APP,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06淺談Vue static 靜態(tài)資源路徑 和 style問題
這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue中的Object.defineProperty全面理解
這篇文章主要介紹了Vue中的Object.defineProperty全面理解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04