1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 <!-- 导入 vue 文件 --> 9 <script src="./lib/vue_2.5.22.js"></script> 10 </head> 11 <body> 12 <!-- 被 vue 实例控制的 div 区域 --> 13 <div id="app"> 14 <!-- 切换组件的超链接 --> 15 <a href="#/zhuye">主页</a> 16 <a href="#/keji">科技</a> 17 <a href="#/caijing">财经</a> 18 <a href="#/yule">娱乐</a> 19 20 <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 --> 21 <!-- 可以把 component 标签当做是【组件的占位符】 --> 22 <component :is="comName"></component> 23 </div> 24 25 <script> 26 // #region 定义需要被切换的 4 个组件 27 // 主页组件 28 const zhuye = { 29 template: '<h1>主页信息</h1>' 30 } 31 32 // 科技组件 33 const keji = { 34 template: '<h1>科技信息</h1>' 35 } 36 37 // 财经组件 38 const caijing = { 39 template: '<h1>财经信息</h1>' 40 } 41 42 // 娱乐组件 43 const yule = { 44 template: '<h1>娱乐信息</h1>' 45 } 46 // #endregion 47 48 // #region vue 实例对象 49 const vm = new Vue({ 50 el: '#app', 51 data: { 52 comName: 'zhuye' 53 }, 54 // 注册私有组件 55 components: { 56 zhuye, 57 keji, 58 caijing, 59 yule 60 } 61 }) 62 // #endregion 63 64 // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称 65 window.onhashchange = function() { 66 // 通过 location.hash 获取到最新的 hash 值 67 console.log(location.hash); 68 switch(location.hash.slice(1)){ 69 case '/zhuye': 70 vm.comName = 'zhuye' 71 break 72 case '/keji': 73 vm.comName = 'keji' 74 break 75 case '/caijing': 76 vm.comName = 'caijing' 77 break 78 case '/yule': 79 vm.comName = 'yule' 80 break 81 } 82 } 83 </script> 84 </body> 85 </html>
