vue頁面跳轉

1、在template中的常見寫法：

  <router-link to="/recommend">
      <button class="button">點擊跳轉</button>
 </router-link>

2、在js中設置跳轉（在方法中跳轉界面並傳參，兩種方式：params 與 query）：

有時候咱們須要的是點擊按鈕跳出彈窗，選擇判斷後進行跳轉，咱們經常使用.$router.push 跳轉 傳參：

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

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

另有：

this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});

//  path:'路由裏配置的index.vue的路徑'
//  params:{id:'1',name:'eva'} /query:{id:'5'}  須要傳遞的參數和值

路由傳參params 和query兩種方式的區別：
一、用法上的

剛纔已經說了，query要用path來引入，params要用name來引入，接收參數都是相似的，分別是this.route.query.name和this.route.params.name。

注意接收參數的時候，已是route而不是router了哦！！
二、展現上的

query更加相似於咱們ajax中get傳參，params則相似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示。
3、路由參數的取值：

{{this.$route.params.參數名}}

注意：接收參數的時候已是route而不是router了。