vue路由傳參（兩種方法總結）

vue傳遞參數有多種，據我瞭解、熟悉的其中兩種總結以下：

1、組件經過query來傳遞flag參數爲1，至關與在 url 地址後面拼接參數 例如：localhost:8080/house?flag=1。 具體實例以下：

<template>

<div>  

    <h3>首頁</h3>  

    <router-link :to="{ path:'/house', query: { flag: 1} }">  

        <button>點擊<tton>  

    </router-link>

    <router-view></router-view>  

</div>

</template>

house.vue頁面以下取值：

<template>

<h3>測試路由傳參{{ this.$route.query.flag}}</h3>

</template>

此種方法通俗，明瞭，可是缺點是參數直接展現在了請求的url裏面，通常能夠傳遞一些標識或者不重要的參數。對於須要保密的一些參數，此種方法不適合。

2、router.push(...)，該方法直接將參數存入了路由當中，不會在url地址欄展現。

例如：localhost:8080/house

實例以下：

this.$router.push({name:'house',params:{flag:1}});

house爲腳手架中定義的路由name值。

以下

routes: [ { path: '/'house, name: 'house', component: house }]

頁面取值以下：

頁面展現：{{this.$route.params.flag}}

鉤子函數取值：

mounted : function() {

alert("我是html頁面傳遞過來的參數：----------------------------"+this.$route.params.flag);

}

此種方法不會將參數展現到url裏面，比較安全，我的建議傳遞參數多使用第二種方式。

3、關於傳遞參數無效的一個實例：

Params

因爲動態路由也是傳遞params的，因此在 this.$router.push() 方法中path不能和params一塊兒使用，不然params將無效。須要用name來指定頁面。

例如：

this.$router.push({name:'/house',params:{flag:1}});

上面的name爲具體跳轉的html頁面路徑，若是不須要攜帶參數，此處頁面也能夠跳轉成功，如果攜帶falg參數，則此處會跳轉，但參數不會傳遞成功。

注：此處的name中只能經過路由配置的name屬性訪問--------------------------------重點