vue跳轉(zhuǎn)頁面

vue怎么跳轉(zhuǎn)頁面呢？不知道的小伙伴來看看小編今天的分享吧!

vue有三種不同方式實現(xiàn)頁面跳轉(zhuǎn)。

方法一：Vue：router-lin

<router-link to="/">[跳轉(zhuǎn)到主頁]</router-link>

<router-link to="/login">[登錄]</router-link>

<router-link to="/logout">[登出]</router-link>

方法二：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>

以上就是小編今天的分享了，希望可以幫助到大家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com