美文网首页
vue三种不同方式实现页面跳转

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

作者: 曹锦花 | 来源:发表于2019-12-31 09:22 被阅读0次

    router-link

     <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);
        }
    

    页面回退

    router.push(location) history中会有记录
    router.replace(location) history中不会有记录
    router.go(n) 在history记录中向前跳转几页或者向后几页

    相关文章

      网友评论

          本文标题:vue三种不同方式实现页面跳转

          本文链接:https://www.haomeiwen.com/subject/spxboctx.html