创建history路由
parent
aed4ecf4cd
commit
56d087dbe9
|
@ -7,8 +7,8 @@
|
|||
"dist/*"
|
||||
],
|
||||
"scripts": {
|
||||
"build:next": "esbuild src/index.js --minify --bundle --format=esm --target=esnext --outfile=dist/index.js",
|
||||
"build:es6": "esbuild src/index.js --minify --bundle --format=esm --target=es6 --outfile=dist/index.es6.js",
|
||||
"build:next": "esbuild src/index.js --minify --bundle --external:wkit --format=esm --target=esnext --outfile=dist/index.js",
|
||||
"build:es6": "esbuild src/index.js --minify --bundle --external:wkit --format=esm --target=es6 --outfile=dist/index.es6.js",
|
||||
"build": "npm run build:next && npm run build:es6"
|
||||
},
|
||||
"repository": {
|
||||
|
|
|
@ -4,8 +4,7 @@
|
|||
* @date 2023/08/10 10:10:06
|
||||
*/
|
||||
import { Component } from 'wkit'
|
||||
import createWebHashHistory from './hash-router.js'
|
||||
import createWebHistory from './modern-router.js'
|
||||
import { createWebHashHistory, createWebHistory } from './router-engine.js'
|
||||
import './router-components.js'
|
||||
|
||||
export { createWebHashHistory, createWebHistory }
|
||||
|
|
|
@ -4,30 +4,33 @@
|
|||
* @date 2017-04-14 21:04:50
|
||||
*
|
||||
*/
|
||||
import { bind } from 'wkit'
|
||||
import { hideProp, targetIsThisWindow } from '../utils.js'
|
||||
import { bind, fire } from 'wkit'
|
||||
import {
|
||||
noop,
|
||||
targetIsThisWindow,
|
||||
query2object,
|
||||
object2query
|
||||
} from '../utils.js'
|
||||
|
||||
//hash前缀正则
|
||||
const PREFIX_REGEXP = /^(#!|#)[\/]?/
|
||||
const TRIM_REGEXP = /(^[/]+)|([/]+$)/g
|
||||
const DEFAULT_OPTIONS = {
|
||||
mode: 'hash', // hash | history
|
||||
allowReload: true //连续点击同一个链接是否重新加载
|
||||
}
|
||||
const LINKS = []
|
||||
const RULE_REGEXP =
|
||||
/(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
|
||||
const PREFIX_REGEXP = /^(#!|#)[\/]+?/
|
||||
const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g
|
||||
|
||||
class Router {
|
||||
constructor(options) {
|
||||
hideProp(this, 'table', [])
|
||||
hideProp(this, 'last', '')
|
||||
hideProp(this, 'path', '')
|
||||
hideProp(this, 'pathArr', [])
|
||||
hideProp(this, 'ready', false)
|
||||
hideProp(this, 'noMatch', null)
|
||||
hideProp(this, 'options', Object.assign({}, DEFAULT_OPTIONS, options))
|
||||
this.__listen__()
|
||||
type = 'history'
|
||||
|
||||
#tables = new Map()
|
||||
#views = new Set()
|
||||
|
||||
#targets = new Map()
|
||||
|
||||
#ready = false
|
||||
#route = Object.create(null)
|
||||
|
||||
#beforeEach
|
||||
|
||||
constructor() {
|
||||
// bind(window, 'popstate', this.#hashchange.bind(this))
|
||||
}
|
||||
|
||||
// 事件监听
|
||||
|
@ -172,7 +175,7 @@ class Router {
|
|||
}
|
||||
|
||||
// 跳转到路由
|
||||
go(path, forceCleanHash = false) {
|
||||
go2(path, forceCleanHash = false) {
|
||||
path = path.trim().replace(TRIM_REGEXP, '')
|
||||
let { mode } = this.options
|
||||
|
||||
|
@ -196,21 +199,21 @@ class Router {
|
|||
}
|
||||
|
||||
// 绑定路由事件
|
||||
on(rule, callback) {
|
||||
if (Array.isArray(rule)) {
|
||||
rule.forEach(it => {
|
||||
this.__add__(it, callback)
|
||||
})
|
||||
} else {
|
||||
this.__add__(rule, callback)
|
||||
}
|
||||
// 因为先初始化,才开始监听路由规则
|
||||
// 所以会导致wondow load的时候, 规则还没生效, 而生效之后,load已经结束
|
||||
// 所以这里需要手动再触发一次load
|
||||
Anot.fireDom(window, 'load')
|
||||
addRoute(routes) {
|
||||
// if (Array.isArray(routes)) {
|
||||
// routes.forEach(it => {
|
||||
// this.#add(it)
|
||||
// })
|
||||
// } else {
|
||||
// this.#add(routes)
|
||||
// }
|
||||
// // 初始化后再添加路由, 手动执行一次回调
|
||||
// if (this.#ready) {
|
||||
// this.#hashchange()
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export default function () {
|
||||
return new Router()
|
||||
return () => new Router()
|
||||
}
|
||||
|
|
|
@ -24,7 +24,8 @@ class Router {
|
|||
|
||||
#beforeEach
|
||||
|
||||
constructor() {
|
||||
constructor(type = 'hash') {
|
||||
this.type = type
|
||||
bind(window, 'popstate', this.#hashchange.bind(this))
|
||||
}
|
||||
|
||||
|
@ -222,6 +223,10 @@ class Router {
|
|||
}
|
||||
}
|
||||
|
||||
export default function () {
|
||||
return () => new Router()
|
||||
export function createWebHashHistory() {
|
||||
return () => new Router('hash')
|
||||
}
|
||||
|
||||
export function createWebHistory() {
|
||||
return () => new Router('history')
|
||||
}
|
Loading…
Reference in New Issue