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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。