简易前端路由-点击菜单切换到对应的信息栏
生活随笔
收集整理的這篇文章主要介紹了
简易前端路由-点击菜单切换到对应的信息栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<body><div id="app"><!-- hash值 就是鏈接地址 --><a href="#/zhuye">主頁</a><a href="#/keji">科技</a><a href="#/caijing">財經</a><a href="#/yule">娛樂</a><!-- 根據動態綁定指定的組件名稱 把對應的組件渲染到component標簽所在的位置 --><component :is="comName"></component></div></body></html><script>// 需要被切換的4個組件const zhuye = {template: '<h1>主頁</h1>'}const keji = {template: '<h1>科技</h1>'}const caijing = {template: '<h1>財經</h1>'}const yule = {template: '<h1>娛樂</h1>'}const vm = new Vue({el: '#app',data: {comName: 'zhuye' //默認顯示主頁},//注冊私有組件components: {zhuye,keji,caijing,yule}});// 監聽window的onhashchange事件根據獲取到最新的hash值 切換到要顯示的組件名稱window.onhashchange = function() {// console.log(location.hash);// 通過location.hash 獲取到最新的hash值switch (location.hash.slice(1)) {//獲取到最新的a 給comName賦值case '/zhuye':vm.comName = 'zhuye'breakcase '/caijing':vm.comName = 'zhuye'breakcase '/keji':vm.comName = 'keji'breakcase '/yule':vm.comName = 'yule'break}}
</script>
點擊財經 顯示對應的信息
主要是為了實現功能 沒有給樣式。些微有點丑。。?
?
?
總結
以上是生活随笔為你收集整理的简易前端路由-点击菜单切换到对应的信息栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高考倒计时100天，用python看看高
- 下一篇： html 自动生产,HTML5 Thre