vue页面跳转-携带参数

佚名 6年前 (2019-05-16) 随笔 1732人围观抢沙发百度已收录

vue页面跳转-携带参数

1.第一种 <router-link to='/trip'></router-link>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<router-link to="/miniCard/statement/horizon">
     <button class="btn btn-default">点击跳转</button>
</router-link>

2.js实现跳转

<button @click = "func()">跳转</button>

//js
<script>
    export default{
        methods:{
            func (){
                this.$router.push({name: '/order/page1',params:{ id:'1'}});
                //this.$router.push({path: ''/order/index''});
               //this.$router.push({path: '/order/page1',query:{ id:'2'}});
            }
        }
    }
</script>

路由传参params 和query两种方式的区别：

1、用法上的

　　　　刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。注意接收参数的时候，已经是$route而不是$router了哦！！

2、展示上的

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