vue页面跳转-携带参数

vue页面跳转-携带参数

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

<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，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示