vue路由跳转传递参数方式

最新推荐文章于 2024-07-27 11:33:23 发布

cc°　　淡忘

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量311

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/weixin_45272449/article/details/113845840

版权

Vue 专栏收录该内容

23 篇文章 5 订阅

订阅专栏

一、直接在路由中写参数（刷新页面参数不会丢失）

//路由配置文件
//需要配置动态路由
{
	path: '/detail/:id',
	name: 'Detail',
	component: Detail
}

//跳转时页面
var id = 1;
this.$router.push({
	path: `/detail/${id}`,
})

//跳转后页面 获取参数
this.$route.params.id

二、通过query属性传值（刷新页面参数不会丢失）

//路由配置文件
{
	path: '/detail',
	name: 'Detail',
	component: Detail
}

//跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三',
    id: 1,
  }
})

//跳转后页面获取参数对象
this.$route.query

三、通过params属性传值（刷新页面参数会丢失）

//路由配置文件中
{
	path: '/detail',
	name: 'Detail',
	component: Detail
}

//跳转时页面
this.$router.push({
  name: 'Detail',
  params: {
    name: '张三',
    id: 1,
  }
})
 
//跳转后页面获取参数对象
this.$route.params