博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端路由的简单使用
阅读量:6953 次
发布时间:2019-06-27

本文共 1334 字,大约阅读时间需要 4 分钟。

function Router() {
this.routes = {}
this.currentHash = ''
}
var noop = function () {}
// 路由注册
Router.prototype.route = function (hash, cb) {
this.currentHash = hash
this.routes[this.currentHash] = cb || noop
}
// 路由刷新
Router.prototype.refresh = function () {
let hash = location.hash || '#position'
this.currentHash = hash
this.routes[this.currentHash]()
this.switchTabbar()
}
// tabbar switch
Router.prototype.switchTabbar = function () {
let hashs = ['#position', '#search', '#profile']
let index = hashs.indexOf(this.currentHash)
$('nav li')
.eq(index)
.addClass('active')
.siblings()
.removeClass('active')
}
// 路由切换监听
Router.prototype.init = function () {
window.addEventListener('load', this.refresh.bind(this))
window.addEventListener('hashchange', this.refresh.bind(this))
}
export default Router
 
 
 
 
import Router from './utils/router'
import homeController from './controllers/home'
import positionController from './controllers/position'
import searchController from './controllers/search'
import profileController from './controllers/profile'
// shaojun
homeController.render()
const router = new Router()
router.init()
router.route('#position', positionController.render)
router.route('#search', searchController.render)
router.route('#profile', profileController.render)

转载于:https://www.cnblogs.com/carolavie/p/9801131.html

你可能感兴趣的文章
使用Nginx反向代理到go-fastdfs
查看>>
【每日推理2019/06/02】
查看>>
android进程保活实践
查看>>
Activity的四种加载模式之生命周期变化(横竖屏切换)
查看>>
Spark性能优化:优化数据结构
查看>>
又是臭重惹得祸!Office 2016大当机遭微软紧急撤除
查看>>
Flutter 入门之 ListTile 使用指南
查看>>
Android Material Design控件使用(一)——ConstraintLayout 约束布局
查看>>
好程序员Web前端分享程序的三大结构(一)
查看>>
Mac下如何编译 FFmpeg的SO库,为Android使用
查看>>
Spring Cloud构建微服务架构:服务消费(基础)
查看>>
为什么区块链世界既需要计算机科学家也需要经济学家?
查看>>
区块链100讲:10分钟教会你深挖以太坊数据层
查看>>
Sony智慧耳机:不但能轻松叫智能耳机也能与Alexa对话
查看>>
中小企业改造系统适应秒杀的场景
查看>>
Atom 微信小程序文件代码高亮
查看>>
Android 8.0 startActivity 流程图
查看>>
react 中间件的应用
查看>>
leetcode 198. 打家劫舍
查看>>
星星之火,可以燎原|”分阶段“裂变带来1周1万+垂直户
查看>>