在最近的項目開發(fā)中，需要使用到Vue的頁面跳轉(zhuǎn)，就記錄一下常用的幾種：

原生JS

var url = 'https://10.50.1.10:8888/'
window.open(url)//打開新頁面
window.location.href = url//跳轉(zhuǎn)頁面

template

  <router-link to="/recommend">
      <button class="button">點擊跳轉(zhuǎn)</button>
 </router-link>

$router.push

有時候我們需要的是點擊按鈕跳出彈窗，選擇判斷后進(jìn)行跳轉(zhuǎn)，我們常用.$router.push 跳轉(zhuǎn) 傳參：

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

<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'}  需要傳遞的參數(shù)和值

路由傳參params 和query兩種方式的區(qū)別：

用法上的

剛才已經(jīng)說了，query要用path來引入，params要用name來引入，接收參數(shù)都是類似的，分別是this.route.query.name和this.route.params.name。

注意接收參數(shù)的時候，已經(jīng)是route而不是router了哦！！

展示上的

query更加類似于我們ajax中g(shù)et傳參，params則類似于post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示。

三、路由參數(shù)的取值：

{{this.$route.params.參數(shù)名}}
//注意：接收參數(shù)的時候已經(jīng)是 route 而不是router了