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，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示