vue 動態路由匹配&路由組件傳遞參數

動態路由匹配

動態路由匹配的基本使用

當我們需要許多類似路由（例如用戶界面，不同用戶登錄的界面不相同），就需要寫許多基本相同的路由，這個時候我們就可以使用動態路由來解決這個問題。

應用場景：通過動態路由參數的模式進行路由的匹配

在通過路由設置完成后，通過 $router.params 獲取路由的參數

var router = new VueRouter({
　　router: [
　　　　//動態路徑參數 以冒號開頭
　　　　{ path: '/user/:id', component: User }
　　]
})

const User = {
　　//路由組件中通過 $router.params 獲取路由參數
　　template: `<div>User{{ $router.params.id }}</div>`
}

路由組件傳遞參數

$router與對應路由形成高度耦合，不夠靈活，所以可以使用props將組件和路由解耦

props的值為布爾類型

const router new VueRouter({
　　router: [
　　　　//如果 props 被設置為 true， router.params 將會被設置為組件屬性
　　　　{ path: '/user/:id', component: User, props:true}
　　]
})

const User = {
　　props: ['id'],//使用 props 接收路由的參數
　　template: `<div>用戶ID:{{ id }}</div>` //使用路由參數
}

props的值為對象類型

當props的值為對象類型的時候，此時通過路徑傳遞過來的值將無法使用，子組件只能獲取到props傳遞的靜態參數

const router new VueRouter({
　　router: [
　　　　//如果 props 是一個對象，它會被按原樣式設置為組件屬性
　　　　{ path: '/user/:id', component: User, props:{ uname:'yzy', age: 21 } }
　　]
})

const User = {
　　props: ['uname',age],
　　template: `<div>用戶ID:{{ uname + '---' + age}}</div>`
}

如果既想傳遞路徑中的參數，也想傳遞靜態參數，可以通過props函數類型傳遞參數

props的值為函數類型

 

 

const router new VueRouter({
　　router: [
　　　　//如果 props 是一個函數，則這個函數 接收 對象為自己的形參
　　　　{ path: '/user/:id', 
　　　　　component: User,
　　　　  props:router => ({ uname: 'yzy', age: 21, id: router.parops.id})
　　]
})

const User = {
　　props: ['uname','age'，'id'],
　　template: `<div>用戶ID:{{ uname + '---' + age + '---' + id }}</div>`
}