vue跳转页面的几种方法，vue3页面跳转

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>

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

32122034