vue-router(2)
阿新 • • 發佈:2018-07-30
efault title name blank === color direct class 獲取
1. 動態路由匹配
- /home/123456 ---> resFul ---> params
- /home?room_id=123456 ---> query
(1) resFul
(1.1) 通過$route.params獲取id
<div>房間號:{{$route.params.id}}</div>
<div>成員Id:{{$route.params.mum_id}}</div>
routes: [{ path:‘/home/:id/number/:mum_id‘, name:‘home‘, component: Home }]
(1.2) 監聽
watch: {
$route(to,from) {
console.log(to)
console.log(from)
}
}
(2)query
- 通過$route.query獲取query信息
- http://localhost:8080/#/home?room_id=123
- http://localhost:8080/#/home?room_id=123&mum_id=567
- 房間Id:{{$route.query.room_id}}
2. 重定向
{ path:‘*‘, redirect:‘/home‘ } { path:‘*‘, redirect:{name:‘home‘} } { path:‘*‘, redirect(to) { if(to.path === ‘/‘) { return ‘/home‘ }else { return {path:‘/err‘} } } }
嵌套路由
命名視圖
export default new VueRouter({ routes: [ { path:‘/home/:id?‘, name:‘home‘, component: Home } ], }) <template> <div> <div>我是{{title}}</div> <div>房間號:{{$route.params}}</div> </div> </template> <script> import Home from ‘../components/home‘ export default { data() { return { title: ‘HOME‘ } } } </script>
vue-router(2)