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

小鱼儿 2023-06-24 06:26 41阅读 0赞

页面与页面之间跳转传值，其实我们一般用两种，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][https_router.vuejs.org_zh_guide_essentials_navigation.html]

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

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

[https_router.vuejs.org_zh_guide_essentials_navigation.html]: https://router.vuejs.org/zh/guide/essentials/navigation.html