router-link 中的query 和params的区别

跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

1、this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})     

 　　获取参数 {{this.$route.query.id}}

2、this.$router.push({name: 'detail',params:{id: 'abc'}})

　　获取参数：{{this.$route.params.id}}

 

query和params 的区别：

1.用法上

　　query要用path来引入，params要用name来引入。

2.展示上的

　　query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。

const routes = [
  { name: 'users', path: '/users/:id', component: Users },
  { path: '/books', component: Books }
]

// params使用场景
router.push('/users/123') // 跳转时
router.push({ // 另一种方式跳转
  name: 'users',
  params: {
    id: 123
  }
})

// 获取id
route.params.id // 123
// 实际URL地址 => localhost:8080/users/123


// query使用场景
router.push('books?q=123') // 跳转时
router.push({ // 另一种方式跳转
  path: '/books',
  query: {
    q: 123
  }
})

// 获取query
route.query.q // 123
// 实际URL地址 => localhost:8080/books?q=123

参考地址：

https://www.cnblogs.com/jiajiamiao/p/11609335.html

扫描二维码关注公众号，回复： 8446991 查看本文章

http://www.imooc.com/wenda/detail/517721