前端路由的简单使用

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)
posted @ 2018-10-16 22:29  carolavie  阅读(337)  评论(0编辑  收藏  举报