快捷導(dǎo)航

vue跳轉(zhuǎn)頁面的幾種常用方法實例總結(jié)

更新時間：2024年05月28日 10:12:32 作者：戰(zhàn)斗天使ZCY

Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guā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標(biāo)簽可以跳轉(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>