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

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

Vue：router-lin 及query传参方式

1 2 3

<router-link to="/">[跳转到主页]</router-link> <router-link to="/login">[登录]</router-link> <router-link to="/logout">[登出]</router-link> <router-link :to="{path:'testDemo',query:{setid:123456}}">

this.$router.push("/");

1 2 3 4 5 6 7 8 9

<button @click="goHome">[跳转到主页]</button> export default {  name: "App",  methods: {  // 跳转页面方法  goHome() {  this.$router.push("/");  //带参数跳转  this.$router.push({path:'/testDemo',query:{setid:123456}});  this.$router.push({name:'testDemo',params:{setid:111222}});  }  }, }

this.$router.go(1);

1 2 3 4 5 6 7 8 9 10 11

<button @click="upPage">[上一页]</button> <button @click="downPage">[下一页]</button> upPage() { // 后退一步记录，等同于 history.back() this.$router.go(-1); }, downPage() { // 在浏览器记录中前进一步，等同于 history.forward() this.$router.go(1); }