创建history路由

master
yutent 2023-08-14 18:18:41 +08:00
parent aed4ecf4cd
commit 56d087dbe9
4 changed files with 48 additions and 41 deletions

View File

@ -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": {

View File

@ -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 }

View File

@ -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()
}

View File

@ -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')
}