vue-router（2）

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>

 

转载于:https://www.cnblogs.com/goff-mi/p/9392392.html

总结

以上是生活随笔为你收集整理的vue-router（2）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。