完成history路由开发

master
yutent 2023-08-14 18:44:54 +08:00
parent 56d087dbe9
commit 80a58ac116
3 changed files with 31 additions and 25 deletions

View File

@ -106,7 +106,7 @@ class RouterLink extends Component {
if (type === 'hash') { if (type === 'hash') {
location.hash = this.#href location.hash = this.#href
} else { } else {
window.history.pushState({ path }, null, this.#href) this.$router.push(this.to)
} }
} }

View File

@ -11,8 +11,11 @@ import { noop, query2object, object2query } from '../utils.js'
const PREFIX_REGEXP = /^(#!|#)[\/]+?/ const PREFIX_REGEXP = /^(#!|#)[\/]+?/
const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g
const MODE_HASH = 'hash'
const MODE_HISTORY = 'history'
class Router { class Router {
type = 'hash' type = MODE_HASH
#tables = new Map() #tables = new Map()
#views = new Set() #views = new Set()
@ -24,7 +27,7 @@ class Router {
#beforeEach #beforeEach
constructor(type = 'hash') { constructor(type = MODE_HASH) {
this.type = type this.type = type
bind(window, 'popstate', this.#hashchange.bind(this)) bind(window, 'popstate', this.#hashchange.bind(this))
} }
@ -91,8 +94,12 @@ class Router {
// 路由检测 // 路由检测
#check() { #check() {
let isHash = this.type === MODE_HASH
let $view = window.__wkitd__.get('ROUTER_VIEW') let $view = window.__wkitd__.get('ROUTER_VIEW')
let path = location.hash let hash = location.hash
let path = isHash
? location.hash
: location.href.replace(location.origin, '').replace(hash, '')
let query let query
if (path.includes('?')) { if (path.includes('?')) {
@ -197,11 +204,12 @@ class Router {
// //
push(obj = { path: '', query: {} }, replace = false) { push(obj = { path: '', query: {} }, replace = false) {
let path = '' let path = '',
if (typeof path === 'string') { query = ''
if (typeof obj === 'string') {
path = obj.trim() path = obj.trim()
} else { } else {
let query = object2query(obj.query || '') query = object2query(obj.query || '')
path = obj.path + (query ? `?${query}` : '') path = obj.path + (query ? `?${query}` : '')
} }
@ -210,11 +218,22 @@ class Router {
return return
} }
if (this.type === MODE_HASH) {
if (replace) { if (replace) {
location.replace(path.replace(/^\//, '#/')) location.replace(path.replace(/^\//, '#/'))
} else { } else {
location.hash = path location.hash = path
} }
} else {
if (replace) {
window.history.replaceState({ path }, null, path + query)
} else {
window.history.pushState({ path }, null, path + query)
}
// pushState & replaceState 不会触发popstate事件
// 要手动触发路由检测
this.#check()
}
} }
// //
@ -224,9 +243,9 @@ class Router {
} }
export function createWebHashHistory() { export function createWebHashHistory() {
return () => new Router('hash') return () => new Router()
} }
export function createWebHistory() { export function createWebHistory() {
return () => new Router('history') return () => new Router(MODE_HISTORY)
} }

View File

@ -17,19 +17,6 @@ export function hideProp(host, name, value) {
}) })
} }
// 判定A标签的target属性是否指向自身
export function targetIsThisWindow(target) {
if (
!target ||
target === window.name ||
target === '_self' ||
(target === 'top' && window == window.top)
) {
return true
}
return false
}
/** /**
* query 序列化 * query 序列化
*/ */