關於Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，便於構建單頁面應用。
Vue Router 路由組件的傳參主要有三種方式
1 布爾模式
布爾模式中，在router中將props屬性設置為true，就可以在匹配的組件里通過props數組獲取參數。
props讓組件與路由解耦，使得組件更易於重用和測試
//布爾模式路由傳參
{
path: "/profile/:mine",
component: profile,
props: true
}
2 對象模式
如果 props 是一個對象，它會被按原樣設置為組件屬性。當 props 是靜態的時候有用。
{
path: '/position/:id/city/:city',
component: position,
props: { age: 20 }
},
3 函數模式
router中，如果props設為一個函數，那么可在組件的props數組拿到該函數的返回對象，從而獲取參數
{
path: '/search',
component: search,
props: function (route) {
return { query: route.query.keyword };
}
},
案例
<body>
<div id="app">
<ul>
<router-link tag="li" to="/" exact active-class="active">首頁</router-link>
<router-link tag="li" to="/position/35/city/北京" exact active-class="active">職位</router-link>
<router-link tag="li" to="/search?keyword=前端" exact active-class="active">搜索</router-link>
<router-link tag="li" to="/profile/我的" exact active-class="active">我的</router-link>
</ul>
<router-view></router-view>
</div>
<script>
const position = {
props: ['age'],
template: `<div>{{age}}---{{$route.params.id}}---{{$route.params.city}}</div>`
}
const search = {
props: ['query'],
template: `<div>search-{{query}}</div>`
}
const profile = {
props: ['mine'],
template: `<div>profile-{{mine}}</div>`
}
var router = new VueRouter({
mode: 'hash',//默認是hash
//將url和組件匹配
routes: [
//布爾模式路由傳參
{
path: "/profile/:mine",
component: profile,
props: true
},
//對象模式路由傳參
{
path: '/position/:id/city/:city',
component: position,
props: { age: 20 }
},
//函數模式路由傳參
{
path: '/search',
component: search,
props: function (route) {
return { query: route.query.keyword };
}
},
{
path: "*",
component: {
template: `
<h1>404 page not found</h1>
`
}
}
]
});
var vm = new Vue({
el: "#app",
router
});
</script>
</body>
關於路由中參數的獲取
參數的存放並不以傳參模式為區分，而是根據url來判定
類似post/:id格式的動態參數存放在$route.params中
而post?id=1的url參數存放在$route.query中
為了測試，在案例代碼的基礎上做些增改
DOM:
<router-link tag="li" to="/search/前端" exact active-class="active">搜索1</router-link>
<router-link tag="li" to="/search?keyword=前端" exact active-class="active">搜索2</router-link>
router:
//函數模式
{
path: '/search/:pos',
component: search,
props: function (route) {
return { query: route.params.pos };
}
},
//函數模式
{
path: '/search',
component: search,
props: function (route) {
return { query: route.query.keyword };
}
}
函數模式傳參，搜索1的參數在params中，而搜索2的參數在query中。
搜索1
搜索2
