vue跳轉頁面的幾種方法(推薦)
vue跳轉不同頁面的多種方法
1：router-link跳轉
<!-- 直接跳轉 -->
<router-link to='/testDemo'>
<button>點擊跳轉2</button>
</router-link>
<!-- 帶參數(shù)跳轉 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
<button>點擊跳轉1</button>
</router-link>
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
<button>點擊跳轉3</button>
</router-link>
2：this.$router.push()
<template>
<div id='test'>
<button @click='goTo()'>點擊跳轉4</button>
</div>
</template>
<script>
export default{
name:'test',
methods:{
goTo(){
//直接跳轉
this.$router.push('/testDemo');
//帶參數(shù)跳轉
this.$router.push({path:'/testDemo',query:{setid:123456}});
this.$router.push({name:'testDemo',params:{setid:111222}});
}
}
}
</script>
params和query傳參數(shù)有什么不一樣？？在地址欄中可以看到，params傳參數(shù)時，地址欄中看不到參數(shù)的內容，有點像ajax中的post傳參，query傳參數(shù)時，地址欄中可以看到傳過來的參數(shù)信息，有點像ajax的個體傳參
如果單獨傳setId一個參數(shù)的時候，地址欄中的地址如下圖：
第一種方式：path - query 傳參
第二種方式：name - params傳參數(shù)
但是一般情況下，傳參數(shù)是傳遞一個對象，當傳遞的是一個對象的時候，地址欄中的地址如下圖：
第一種方式：path - query 傳參
第二種方式：name - params傳參數(shù)
3：a標簽可以跳轉么？？可以跳轉外部鏈接，不能路由跳轉
<a href="https://www.baidu.com"><button>點擊跳轉5</button></a>
接收方怎么接收參數(shù)？？this.$route.query.serid和this.$route.params.setid，以下舉一個接收的例子
注意接收參數(shù)時是 $route 不是 $router
<template>
<div>
testDemo{{this.$route.query.setid}}
</div>
</template>
知識點補充：vue三種不同方式實現(xiàn)頁面跳轉
Vue：router-lin
<router-link to="/">[跳轉到主頁]</router-link> <router-link to="/login">[登錄]</router-link> <router-link to="/logout">[登出]</router-link>
this.$router.push("/");
<button @click="goHome">[跳轉到主頁]</button>
export default {
name: "App",
methods: {
// 跳轉頁面方法
goHome() {
this.$router.push("/");
},
}
this.$router.go(1);
<button @click="upPage">[上一頁]</button>
<button @click="downPage">[下一頁]</button>
upPage() {
// 后退一步記錄，等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在瀏覽器記錄中前進一步，等同于 history.forward()
this.$router.go(1);
}
代碼示例：
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-link to="/">[跳轉到主頁]</router-link>
<router-link to="/login">[登錄]</router-link>
<router-link to="/logout">[登出]</router-link>
<!-- javascript跳轉頁面 -->
<button @click="goHome">[跳轉到主頁]</button>
<!-- 回到上一頁 -->
<button @click="upPage">[上一頁]</button>
<button @click="downPage">[下一頁]</button>
<!-- 回到下一頁 -->
</div>
</template>
<script>
export default {
name: "App",
methods: {
// 跳轉頁面方法
goHome() {
this.$router.push("/");
},
upPage() {
// 后退一步記錄，等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在瀏覽器記錄中前進一步，等同于 history.forward()
this.$router.go(1);
}
}
};
</script>
總結
到此這篇關于vue不同方法跳轉頁面的幾種方法的文章就介紹到這了,更多相關vue 跳轉頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中electron框架自定義外部配置文件的配置與讀取辦法
使用Electron開發(fā)本地跨平臺的本地程序時,有時需要添加一些程序的配置文件,下面這篇文章主要給大家介紹了關于vue中electron框架自定義外部配置文件的配置與讀取的相關資料,需要的朋友可以參考下2023-12-12
計算圖片的MD5可以將其作為圖片的唯一標識,從而優(yōu)化對圖片的存儲和檢索效率,本文主要介紹了Vue獲取圖片MD5的常用方法,感興趣的可以了解下2024-12-12
這篇文章主要為大家介紹了vue圓形進度條環(huán)形進度條組件內部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
vue實現(xiàn)移動端彈出鍵盤功能(防止頁面fixed布局錯亂)
這篇文章主要介紹了vue?解決移動端彈出鍵盤導致頁面fixed布局錯亂的問題,通過實例代碼給大家分享解決方案，對vue?移動端彈出鍵盤相關知識感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了vue中this.$refs的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-cli3.0 腳手架搭建項目的過程，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
在現(xiàn)代的單頁面應用（SPA）中,404錯誤是不可避免的,當用戶訪問一個無效的路由時,我們希望能夠提供一個友好的404頁面,以改善用戶體驗,在這篇博客中,我們將探討如何在Vue應用中處理404頁面,并提供示例代碼幫助你更好地理解這一過程,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue a標簽點擊實現(xiàn)賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要給大家介紹了關于如何在vue中使用百度地圖添加自定義覆蓋物（水波紋）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11