Vue2.0通过二级路由实现页面切换
生活随笔
收集整理的這篇文章主要介紹了
Vue2.0通过二级路由实现页面切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue2.0通過二級路由實現頁面切換
需求分析:以下歌手列表(singer.vue)頁中,點擊列表跳轉到歌手詳情頁(singer-detail.vue)。
實現方法:使用二級vue-router實現。
vue-router配置:
設置二級路由后,需要再singer.vue中設置router-view,用于掛載singer-detail.vue的內容,關鍵代碼用紅框標出。
點擊歌手后的運行結果:(注:singer-detail.vue只是一個簡單的fixed的100%高度和寬度的頁面,僅用于測試,暫未開發,具體UI可自己實現。)
根據id區分不同歌手,畫紅線處為歌手id,對應于路由的:id
總結
以上是生活随笔為你收集整理的Vue2.0通过二级路由实现页面切换的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Vue+stylus实现自定义文字的lo
- 下一篇: Vue2.x中vuex的使用方法及应用时