vue跳轉(zhuǎn)頁面的幾種常用方法實例總結(jié)
更新時間：2024年05月28日 10:12:32 作者：戰(zhàn)斗天使ZCY
Vue是一種流行的JavaScript框架,用于構建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關于vue跳轉(zhuǎn)頁面的幾種常用方法,需要的朋友可以參考下
vue跳轉(zhuǎn)不同頁面的方法
1.router-link跳轉(zhuǎn)
<!-- 直接跳轉(zhuǎn) -->
<router-link to='/testC'>
<button>點擊跳轉(zhuǎn)2</button>
</router-link>
<!-- 帶參數(shù)跳轉(zhuǎn) -->
<router-link :to="{path:'testC',query:{setid:123456}}">
<button>點擊跳轉(zhuǎn)1</button>
</router-link>
<router-link :to="{name:'testC',params:{setid:1111222}}">
<button>點擊跳轉(zhuǎn)3</button>
</router-link>2.this.$router.push()
<template>
<div id='app'>
<button @click='goTo()'>點擊跳轉(zhuǎn)4</button>
</div>
</template>
<script>
new Vue({
el:'#app',
methods:{
goTo(){
//直接跳轉(zhuǎn)
this.$router.push('/testDemo');
//帶參數(shù)跳轉(zhuǎn)
this.$router.push({path:'/testC',query:{setid:123456}});
this.$router.push({name:'testC',params:{setid:111222}});
}
}
})
</script>3.a標簽可以跳轉(zhuǎn)外部鏈接，不能路由跳轉(zhuǎn)
<a rel="external nofollow" ><button>點擊跳轉(zhuǎn)5</button></a>
接收：this.$route.query.serid 和 this.$route.params.setid
vue三種不同方式實現(xiàn)跳轉(zhuǎn)頁面
Vue：router-link
<router-link to="/">[跳轉(zhuǎn)到主頁]</router-link>
<router-link to="/login">[登錄]</router-link>
<router-link to="/logout">[登出]</router-link>
this.$router.push("/");this.$router.push("/")
<button @click="goHome">[跳轉(zhuǎn)到主頁]</button>
export default {
name: "App",
methods: {
// 跳轉(zhuǎn)頁面方法
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="/">[跳轉(zhuǎn)到主頁]</router-link>
<router-link to="/login">[登錄]</router-link>
<router-link to="/logout">[登出]</router-link>
<!-- javascript跳轉(zhuǎn)頁面 -->
<button @click="goHome">[跳轉(zhuǎn)到主頁]</button>
<!-- 回到上一頁 -->
<button @click="upPage">[上一頁]</button>
<button @click="downPage">[下一頁]</button>
<!-- 回到下一頁 -->
</div>
</template>
<script>
export default {
name: "App",
methods: {
// 跳轉(zhuǎn)頁面方法
goHome() {
this.$router.push("/");
},
upPage() {
// 后退一步記錄，等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在瀏覽器記錄中前進一步，等同于 history.forward()
this.$router.go(1);
}
}
};
</script>總結(jié)
到此這篇關于vue跳轉(zhuǎn)頁面的幾種常用方法的文章就介紹到這了,更多相關vue跳轉(zhuǎn)頁面方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是?vue3?新的狀態(tài)管理工具，簡單來說相當于之前?vuex，它去掉了?Mutations?但是也是支持?vue2?的，需要的朋友可以參考下2022-08-08
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
在Vue中,可以使用多種方式來處理cookie和本地存儲,不同的方法還有不同的特點和適用場景,本文主要介紹了這些方法的對比和使用場景,希望對大家有所幫助2023-08-08
Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法
這篇文章主要介紹了Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-07-07
Arco Design 作為一款專為 Vue3 打造的企業(yè)級 UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應用開發(fā)者值得關注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue腳手架的簡單使用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中的數(shù)據(jù)雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法
KML 文件作為一種標準的地理數(shù)據(jù)格式,廣泛應用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了vue實現(xiàn)導航菜單和編輯文本功能的方法，文中示例代碼非常詳細，幫助大家更好的參考和學習，感興趣的朋友可以了解下2020-07-07
vue3接口數(shù)據(jù)賦值對象,渲染報錯問題及解決
這篇文章主要介紹了vue3接口數(shù)據(jù)賦值對象,渲染報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09