生活随笔
收集整理的這篇文章主要介紹了
实现简易前端路由
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
實(shí)現(xiàn)簡(jiǎn)易前端路由
<!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><!-- 導(dǎo)入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script></head><body><!-- 被 vue 實(shí)例控制的 div 區(qū)域 --><div id="app"><!-- 切換組件的超鏈接 --><a href="#/zhuye">主頁(yè)</a> <a href="#/keji">科技</a> <a href="#/caijing">財(cái)經(jīng)</a><a href="#/yule">娛樂(lè)</a><!-- 根據(jù) :is 屬性指定的組件名稱，把對(duì)應(yīng)的組件渲染到 component 標(biāo)簽所在的位置 --><!-- 可以把 component 標(biāo)簽當(dāng)做是【組件的占位符】 --><component :is="comName"></component></div><script>// #region 定義需要被切換的 4 個(gè)組件// 主頁(yè)組件const zhuye = {template: '<h1>主頁(yè)信息</h1>'}// 科技組件const keji = {template: '<h1>科技信息</h1>'}// 財(cái)經(jīng)組件const caijing = {template: '<h1>財(cái)經(jīng)信息</h1>'}// 娛樂(lè)組件const yule = {template: '<h1>娛樂(lè)信息</h1>'}// #endregion// #region vue 實(shí)例對(duì)象const vm = new Vue({el: '#app',data: {comName: 'zhuye'},// 注冊(cè)私有組件components: {zhuye,keji,caijing,yule}})// #endregion// 監(jiān)聽(tīng) window 的 onhashchange 事件，根據(jù)獲取到的最新的 hash 值，切換要顯示的組件的名稱window.onhashchange = function() {// 通過(guò) 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>
總結(jié)
以上是生活随笔為你收集整理的实现简易前端路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
