Vue路由传参

1,352 阅读1分钟

1. vue路由跳转传参

日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:

1.1 配置动态路由

  • 页面刷新,参数不会消失
  • URl路径会显示传递的参数,参数公开
//1. 路由配置文件中 配置动态路由
{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
 }
   
   
//2. 使用,跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//url形式: http://192.169.3.198/detail/1
 
//3. 跳转后页面获取参数
this.$route.params.id

1.2 通过query属性传值

  • 使用 path 来匹配路由
  • 页面刷新,参数不会消失
  • query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1
//1. 路由配置文件
{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }
   
//2. 跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三'id: 1,
  }
})
//url形式: http://192.169.3.198/detail?id=1&name='张三'
 
//3. 跳转后页面获取参数对象
this.$route.query

1.3 通过params属性传值

  • 通过路由属性中的 name 来确定匹配的路由
  • 密文传参,参数不在url地址上显示
  • 缺点:刷新页面后,参数就消失了
//1. 路由配置文件
{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }
   
//2. 跳转时页面
this.$router.push({
  name: 'Detail',
  params: {
    name: '张三'id: 1,
  }
})
 
//3. 跳转后页面获取参数对象
this.$route.params

1.4 总结

  • 动态路由和query属性传值 页面刷新参数不会丢失, params会丢失
  • 动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。