Vue 同一页面跳转

Question

问题描述

点击另外一个产品后，跳转至本页面展示，使用的路由router-link组件to属性
<router-link :to="{name: 'product', params:{productId:anotherProductId}}">

问题出现的环境背景及自己尝试过哪些方法

1.使用编程式的导航

this.$router.push({name: 'product', params:{productId:anotherProductId}});

失败

2.使用query传参

this.$router.push({name: 'product', query:{productId:anotherProductId}})

成功

相关代码

 {
    name: 'product',
    path: '/product',
    component: productDetail
 }

watch: {
    '$route.params.productId'(){ /*监听产品id 及时变更data数据*/
        this.productId = this.$route.params.productId;
    } 
}

data(){
    return(){
        this.productId = this.$route.params.productId; /*当前产品id 当id变更时 刷新页面*/
    }
}

你期待的结果是什么？想弄明白什么？

使用params也可以监听'$route.params.productid'更改当前产品id，成功展示想要展示的产品信息。

想弄明白为什么params不能用，而query可以正确显示。谢谢大牛，请不吝赐教！

Answer 1

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

Answer 2

你写的编程式的导航不会报错吗？后面漏了个 “ } ” 符号

Answer 3

用param的时候路由这样写:

 {
    name: 'product',
    path: '/product/:productId',
    component: productDetail
 }