Vue 中进行路由跳转传参数

最新推荐文章于 2023-08-01 09:33:15 发布

ioszhanghui

最新推荐文章于 2023-08-01 09:33:15 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue push 路由跳转

本文链接：https://blog.youkuaiyun.com/ioszhanghui/article/details/94445453

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了Vue中使用声明式和编程式的路由跳转方法，包括如何通过router-link和this.$router.push进行页面跳转，并解释了参数传递的两种方式：query和params，以及如何在目标页面中获取这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue使用声明式，router-link进行跳转

1.不传递任何的参数

//不传递任何的参数
 <button><router-link to='/first'>跳转页面</router-link></button>

2.传递参数

//通过query方式进行 路由跳转 等同于 this.$router.push({path:'path',query:{}})
 <button><router-link :to='{path:"/first",query:{id:"890",name:"张辉"}}'>link跳转</router-link></button>
//通过query方式进行 路由跳转 等同于 this.$router.push({name:'path',params:{}})
 <button><router-link :to='{name:"PageFirst",params:{id:"890",name:"张辉"}}'>link跳转param</router-link></button>

Vue中使用push方式，进行路由跳转

1.不传递任何的参数

//path 直接跟跳转路径 例如：/home
this.$router.push(path);

//传递一个Object对象 path 指的是跳转路径
this.$router.push({
path:'path'
})

2.需要携带参数传递，这种有两种方式，一种是通过query传递参数，另一个种是通过params进行参数传递

2.1通过query的方式进行参数传递

在跳转页面的实现，

//query传递参数
this.$router.push({
path:'/first',
query:{
  id:987,
  name:'张辉'
}
});

获取传递的参数：

//获取传递过来的name id 参数
this.tempObj= this.$route.query.name;
this.id = this.$route.query.id;

params的方式传递参数，在使用这个方式时，需要对该路由进行命名name

//给当前路由规则 进行命名 name
{
 path:'/first',
 name:'PageFirst',
 component:PageHead
}

在调用传递参数时

//使用params进行参数传递 name 是路由的命名 params 是传递的参数
this.$router.push({
  name:"PageFirst",
  params:{
    id:987,
    name:'张辉'
  }
})

获取参数时

//获取params时的参数
this.tempObj = this.$route.params.name;
this.id = this.$route.params.id;

学习博客：

https://blog.youkuaiyun.com/zeroyulong/article/details/80578996