本文详细整理了Vue中实现页面跳转的多种方法，包括使用router-link组件、this.$router.push()编程式导航以及普通a标签跳转外部链接。重点解析了query与params在地址栏显示及传参方式上的区别，并提供了接收参数的具体代码示例，帮助开发者掌握Vue路由的核心用法。
Vue页面跳转概述
在Vue开发中，实现页面跳转有多种可行的方案，开发者可以根据具体场景选择最合适的方式。
router-link与编程式导航
第一种常用方法是利用router-link组件进行声明式导航。
<!-- 直接跳转 -->
<router-link to='/testDemo'>
<button>点击跳转2</button>
</router-link>
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
<button>点击跳转1</button>
</router-link>
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
<button>点击跳转3</button>
</router-link>第二种方法是通过this.$router.push()进行编程式导航跳转。
<template>
<div id='test'>
<button @click='goTo()'>点击跳转4</button>
</div>
</template>
<script>
export default{
name:'test',
methods:{
goTo(){
//直接跳转
this.$router.push('/testDemo');
//带参数跳转
this.$router.push({path:'/testDemo',query:{setid:123456}});
this.$router.push({name:'testDemo',params:{setid:111222}});
}
}
}
</script>query与params传参区别
关于params和query传参的区别，主要体现在地址栏的可见性上：使用params传参时，地址栏中不会显示参数内容，类似于Ajax中的POST请求；而使用query传参时，参数会直接显示在地址栏中，类似于Ajax中的GET请求。
当仅传递setId这一个参数时，地址栏中的URL表现如下。
第一种传参方式为path结合query。
第二种传参方式为name结合params。
通常情况下，我们需要传递一个对象作为参数，此时地址栏中的URL表现如下。
第一种传参方式仍为path结合query。
第二种传参方式仍为name结合params。
a标签跳转限制
3：a标签可以跳转么？？可以跳转外部链接，不能路由跳转
<a href="https://www.baidu.com"><button>点击跳转5</button></a>
参数接收方法
接收方如何获取传递的参数？this.$route.query.serid和this.$route.params.setid，以下是一个接收参数的示例。
需要注意的是，接收参数时应使用$route对象，而非$router。
<template>
<div>
testDemo{{this.$route.query.setid}}
</div>
</template>其他跳转方式补充
补充知识点：Vue实现页面跳转的三种不同方式。
Vue中可以使用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);
}以下是完整的代码示例。
<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>
总结部分。
至此，关于Vue不同方法跳转页面的几种方式介绍完毕，更多相关Vue跳转页面内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！