vue跳轉頁面

vue怎麼跳轉頁面呢？不知道的小夥伴來看看小編今天的分享吧!

vue有三種不同方式實現頁面跳轉。

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