vue三种不同方式实现页面跳转

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Frankenstein_/article/details/86085963

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