Vue實現(xiàn)路由跳轉至外界頁面
更新時間：2022年12月09日 09:59:57 作者：南獨酌酒nvn
這篇文章主要介紹了Vue實現(xiàn)路由跳轉至外界頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue路由跳轉至外界頁面
用法
如果使用路由是在 vue 頁面中來回跳轉，可以使用 this.$router.push() 實現(xiàn)，但是如果想用這種方法跳轉到外部鏈接就會報錯，因為外部頁面中是存在 HTTP 等前綴的。
解決辦法
1. 在 data 中定義好要跳轉的外部鏈接
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路由跳轉頁面的幾種方式
1.聲明式導航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.編程式導航 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.跳轉：
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.id3.params傳參
1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳轉：
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.跳轉：
this.$router.push({path:'/home/123'})
或者：
this.$router.push('/home/123')
3.獲取參數(shù)：
this.$route.params.id5.this.$router.go(n)
向前或者向后跳轉n個頁面，n可為正整數(shù)或負整數(shù)
6.跳轉頁面打開新窗口并攜帶參數(shù)
const routeData = this.$router.resolve({
? ? ? ? ? ? ? ? path: `/workbench/customer_detail/${this.audioFrom.import_id}`
? ? ? ? ? ? })
window.open(routeData.href, '_blank')7.跳轉新項目并攜帶參數(shù)
window.open(`https://hao123/#/workbench/customer_detail/${this.audioFrom.import_id}`)總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
我們都知道跨域是同源策略導致的,域名不同、協(xié)議不同、端口號不同任意一種情況都會導致跨域,這篇文章主要介紹了從Vue到Postman全面驗證API接口跨域問題,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了手寫Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04
vue3使用Element-plus的el-pagination分頁組件時無法顯示中文
本文主要介紹了vue3使用Element-plus的el-pagination分頁組件時無法顯示中文,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
這篇文章主要介紹了vue+iview的菜單與頁簽的聯(lián)動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了淺談Vue.set實際上是什么，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue服務器代理proxyTable配置如何解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue接入下載文件接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關于element中el-autocomplete的常見用法的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用element具有一定的參考學習價值,需要的朋友可以參考下2023-03-03