这篇文章主要介绍了vue不同方法跳转页面，本文给大家分享多种方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue跳转不同页面的多种方法
1：router-link跳转
<!-- 直接跳转 --> <button>点击跳转2</button><!-- 带参数跳转 --> <button>点击跳转1</button> <button>点击跳转3</button>
2：this.$router.push()
<div id='test'> <button>点击跳转4</button></div>
params和query传参数有什么不一样？？在地址栏中可以看到，params传参数时，地址栏中看不到参数的内容，有点像ajax中的post传参，query传参数时，地址栏中可以看到传过来的参数信息，有点像ajax的个体传参
如果单独传setId一个参数的时候，地址栏中的地址如下图：
第一种方式：path – query 传参
第二种方式：name – params传参数
但是一般情况下，传参数是传递一个对象，当传递的是一个对象的时候，地址栏中的地址如下图：
第一种方式：path – query 传参
第二种方式：name – params传参数
3：a标签可以跳转么？？可以跳转外部链接，不能路由跳转
https://www.baidu.com">
接收方怎么接收参数？？this.$route.query.serid和this.$route.params.setid，以下举一个接收的例子
注意接收参数时是 $route 不是 $router
<div> testDemo{{this.$route.query.setid}} </div>
知识点补充：vue三种不同方式实现页面跳转
Vue：router-lin
[跳转到主页][登录][登出]
this.$router.push(“/”);
<button>[跳转到主页]</button> export default { name: "App", methods: { // 跳转页面方法 goHome() { th<mark style="color:transparent">本文来源gaodaimacom搞#^代%!码&网*</mark>is.$router.push("/"); }, }
this.$router.go(1);
<button>[上一页]</button><button>[下一页]</button> upPage() { // 后退一步记录，等同于 history.back() this.$router.go(-1); }, downPage() { // 在浏览器记录中前进一步，等同于 history.forward() this.$router.go(1); }
代码示例：
<div id="app"> [跳转到主页][登录][登出]<!-- javascript跳转页面 --><button>[跳转到主页]</button><!-- 回到上一页 --><button>[上一页]</button><button>[下一页]</button><!-- 回到下一页 --></div>
总结
以上就是vue跳转页面的几种方法(推荐)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue跳转页面的几种方法(推荐)
转载请注明原文链接：vue跳转页面的几种方法(推荐)
