• 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>