生活随笔
收集整理的這篇文章主要介紹了
实现简易前端路由
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現簡易前端路由
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 導入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script></head><body><!-- 被 vue 實例控制的 div 區域 --><div id="app"><!-- 切換組件的超鏈接 --><a href="#/zhuye">主頁</a> <a href="#/keji">科技</a> <a href="#/caijing">財經</a><a href="#/yule">娛樂</a><!-- 根據 :is 屬性指定的組件名稱，把對應的組件渲染到 component 標簽所在的位置 --><!-- 可以把 component 標簽當做是【組件的占位符】 --><component :is="comName"></component></div><script>// #region 定義需要被切換的 4 個組件// 主頁組件const zhuye = {template: '<h1>主頁信息</h1>'}// 科技組件const keji = {template: '<h1>科技信息</h1>'}// 財經組件const caijing = {template: '<h1>財經信息</h1>'}// 娛樂組件const yule = {template: '<h1>娛樂信息</h1>'}// #endregion// #region vue 實例對象const vm = new Vue({el: '#app',data: {comName: 'zhuye'},// 注冊私有組件components: {zhuye,keji,caijing,yule}})// #endregion// 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱window.onhashchange = function() {// 通過 location.hash 獲取到最新的 hash 值console.log(location.hash);switch(location.hash.slice(1)){case '/zhuye':vm.comName = 'zhuye'breakcase '/keji':vm.comName = 'keji'breakcase '/caijing':vm.comName = 'caijing'breakcase '/yule':vm.comName = 'yule'break}}</script></body>
</html>
總結
以上是生活随笔為你收集整理的实现简易前端路由的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
