問題：vue-router的動態路由匹配以及使用

動態(tai)路徑匹配：即把(ba)某種模式匹配到的所有路由，全(quan)都映(ying)射(she)到同個組件。使用動態(tai)路由參(can)數來實現。

例如，我們有一個 User 組件，對于所(suo)有ID 各(ge)不相同的(de)用戶，都要使用這個組件來渲染。那么，我們可以在vue-router的(de)路(lu)由路(lu)徑中使用“動態路(lu)徑參數”(dynamic segment)來達到這個效果。

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

這(zhe)樣，像/user/foo和/user/bar都(dou)將映射到相同的路由(you)。

一個(ge)“路徑參數(shu)”使(shi)用冒(mao)號 :標記。當匹配(pei)到(dao)一個(ge)路由(you)時，參數(shu)值會被(bei)設置到(dao) this.$route.params，可以在每個(ge)組件內使(shi)用。

在 User 的模板，輸出當前用(yong)戶的 ID：

const User = {
 template: '<div>User {{ $route.params.id }}</div>'
}

工程中的Vue Router配置目錄：