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>