创建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/*" "dist/*"
], ],
"scripts": { "scripts": {
"build:next": "esbuild src/index.js --minify --bundle --format=esm --target=esnext --outfile=dist/index.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 --format=esm --target=es6 --outfile=dist/index.es6.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" "build": "npm run build:next && npm run build:es6"
}, },
"repository": { "repository": {

View File

@ -4,8 +4,7 @@
* @date 2023/08/10 10:10:06 * @date 2023/08/10 10:10:06
*/ */
import { Component } from 'wkit' import { Component } from 'wkit'
import createWebHashHistory from './hash-router.js' import { createWebHashHistory, createWebHistory } from './router-engine.js'
import createWebHistory from './modern-router.js'
import './router-components.js' import './router-components.js'
export { createWebHashHistory, createWebHistory } export { createWebHashHistory, createWebHistory }

View File

@ -4,30 +4,33 @@
* @date 2017-04-14 21:04:50 * @date 2017-04-14 21:04:50
* *
*/ */
import { bind } from 'wkit' import { bind, fire } from 'wkit'
import { hideProp, targetIsThisWindow } from '../utils.js' import {
noop,
targetIsThisWindow,
query2object,
object2query
} from '../utils.js'
//hash前缀正则 //hash前缀正则
const PREFIX_REGEXP = /^(#!|#)[\/]?/ const PREFIX_REGEXP = /^(#!|#)[\/]+?/
const TRIM_REGEXP = /(^[/]+)|([/]+$)/g const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g
const DEFAULT_OPTIONS = {
mode: 'hash', // hash | history
allowReload: true //连续点击同一个链接是否重新加载
}
const LINKS = []
const RULE_REGEXP =
/(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
class Router { class Router {
constructor(options) { type = 'history'
hideProp(this, 'table', [])
hideProp(this, 'last', '') #tables = new Map()
hideProp(this, 'path', '') #views = new Set()
hideProp(this, 'pathArr', [])
hideProp(this, 'ready', false) #targets = new Map()
hideProp(this, 'noMatch', null)
hideProp(this, 'options', Object.assign({}, DEFAULT_OPTIONS, options)) #ready = false
this.__listen__() #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, '') path = path.trim().replace(TRIM_REGEXP, '')
let { mode } = this.options let { mode } = this.options
@ -196,21 +199,21 @@ class Router {
} }
// 绑定路由事件 // 绑定路由事件
on(rule, callback) { addRoute(routes) {
if (Array.isArray(rule)) { // if (Array.isArray(routes)) {
rule.forEach(it => { // routes.forEach(it => {
this.__add__(it, callback) // this.#add(it)
}) // })
} else { // } else {
this.__add__(rule, callback) // this.#add(routes)
} // }
// 因为先初始化,才开始监听路由规则 // // 初始化后再添加路由, 手动执行一次回调
// 所以会导致wondow load的时候, 规则还没生效, 而生效之后,load已经结束 // if (this.#ready) {
// 所以这里需要手动再触发一次load // this.#hashchange()
Anot.fireDom(window, 'load') // }
} }
} }
export default function () { export default function () {
return new Router() return () => new Router()
} }

View File

@ -24,7 +24,8 @@ class Router {
#beforeEach #beforeEach
constructor() { constructor(type = 'hash') {
this.type = type
bind(window, 'popstate', this.#hashchange.bind(this)) bind(window, 'popstate', this.#hashchange.bind(this))
} }
@ -222,6 +223,10 @@ class Router {
} }
} }
export default function () { export function createWebHashHistory() {
return () => new Router() return () => new Router('hash')
}
export function createWebHistory() {
return () => new Router('history')
} }