Vue页面与页面之间的传值（router.push()编程式导航）

页面与页面之间跳转传值，其实我们一般用两种，query传参或者用params

其实这两个方式都是页面导航的一种，编程式导航：通过调用JavaScript形式的API实现导航的方式，大家不了解的可以去官网看下，比较基础的东西。

其实就是用了router.push()方法，来实现页面之间的传值，只不过有不同的参数规则。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

这边先列出这个router.push()方法的一些参数规则

字符串(路径名称)

router.push('/home')

对象

router.push({path:'/home'})

主要是下面两种

命名的路由({传递参数})

router.push({name:'/user',params:{userId:1}})

//在组件使用
this.$router.push({name: '注册路由时设置的name', params: {参数名: '参数值'})
//接收
var abc = this.$route.params.参数名

带查询参数，变成/productDetail?goodId=123

router.push({path:'productDetail',query:{goodId:'123'}})

//在组件使用
this.$router.push({path: '/', query: {参数名: '参数值'}) 
//接收
var abc = this.$route.query.参数名

注意点：
1.使用params时不能使用path，如果提供了 path，params 会被忽略。还有就是你使用params的时候，你要保证你在router文件夹里的路由文件那边配置了name属性，要不然会提示name不存在，因为有些帖子下面会有人问这些问题。
2.使用用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题，特别是类似这种商品详情页面这种类似的场景的时候，要特别注意下。

其实最好的研究方式就是官网看下，讲的都很详细，还有一些注意点。
有兴趣的可以点击过去看下
https://router.vuejs.org/zh/guide/essentials/navigation.html

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！