vue跳转页面的几种方法(推荐)

vue跳转不同页面的多种方法

站在用户的角度思考问题，与客户深入沟通，找到聂荣网站设计与聂荣网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、雅安服务器托管、企业邮箱。业务覆盖聂荣地区。

1：router-link跳转

 点击跳转2

 


 点击跳转1

 

 点击跳转3

2：this.$router.push()

params和query传参数有什么不一样？？在地址栏中可以看到，params传参数时，地址栏中看不到参数的内容，有点像ajax中的post传参，query传参数时，地址栏中可以看到传过来的参数信息，有点像ajax的个体传参

如果单独传setId一个参数的时候，地址栏中的地址如下图：

    第一种方式：path - query 传参

  第二种方式：name - params传参数

但是一般情况下，传参数是传递一个对象，当传递的是一个对象的时候，地址栏中的地址如下图：

   第一种方式：path - query 传参

  第二种方式：name - params传参数

3：a标签可以跳转么？？可以跳转外部链接，不能路由跳转

点击跳转5

接收方怎么接收参数？？this.$route.query.serid和this.$route.params.setid，以下举一个接收的例子

注意接收参数时是 $route 不是 $router 

知识点补充：vue三种不同方式实现页面跳转

Vue：router-lin

 [跳转到主页]
 [登录]
 [登出]

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

[跳转到主页]
export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
}

this.$router.go(1);

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

代码示例：

总结

到此这篇关于vue不同方法跳转页面的几种方法的文章就介绍到这了,更多相关vue 跳转页面内容请搜索创新互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持创新互联！