美文网首页
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