vue路由傳參，是頁面通訊的重要組成部分，而掌握路由傳參，必須要認識一個重要物件-$route。（切記，是$route,而不是$router）

$route物件

這是一個專門用於記錄vue元件引數的物件。
例如：

//router.js
{ path:'/main/:id',component:Main }

router-link中：

<router-link to='/main/123'></router-link>

//Main.js
console.log(this.$route.params.id);//123

props傳遞——布林模式

如果我們不想使用this.$route.params.id的方式傳遞id，那麼props是一種傳遞的方式，只需要在路由配置檔案中，把props配置為true。就能得到這個id。

如果 props 被設定為 true，route.params 將會被設定為元件屬性。

{ path:'/main/:id',component:Main, props: true }

在Main.js中：

//main.js
console.log(this.id);

props傳遞——物件模式

物件模式是在路由配置的props屬性中，是一個物件。

{ path:'/login', component:Login, props: { userName: 'mapbar_front'} }

在Main.js中，我們可以這樣使用：

props:['userName'],
created:function
 
(){
    console.log(this.userName);
}

props傳遞——函式模式

函式模式的路由配置中，props屬性是函式，這個函式返回一個物件。這個物件中的key，就是將要傳遞給Main元件的props。

{ 
    path:'/login', 
    component:Login, 
    props: ()=>{ 
        return{
            userName:'mapbar_front',
            age: 26
        }
    }

}

同樣的，這樣在Main.js中，也可以獲取userName屬性和age屬性。

在函式模式中，可以有一個引數，這個引數就是route物件，裡面儲存的是路由的相關攜帶資訊。

//函式
function fun(route){
    return { 
        userName: "mapbar_front",
        age: route.params.age
    }
}
//props
{ path:'/login', component:Login, props: funs }

<完>