完成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') {
location.hash = this.#href
} 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 RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g
const MODE_HASH = 'hash'
const MODE_HISTORY = 'history'
class Router {
type = 'hash'
type = MODE_HASH
#tables = new Map()
#views = new Set()
@ -24,7 +27,7 @@ class Router {
#beforeEach
constructor(type = 'hash') {
constructor(type = MODE_HASH) {
this.type = type
bind(window, 'popstate', this.#hashchange.bind(this))
}
@ -91,8 +94,12 @@ class Router {
// 路由检测
#check() {
let isHash = this.type === MODE_HASH
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
if (path.includes('?')) {
@ -197,11 +204,12 @@ class Router {
//
push(obj = { path: '', query: {} }, replace = false) {
let path = ''
if (typeof path === 'string') {
let path = '',
query = ''
if (typeof obj === 'string') {
path = obj.trim()
} else {
let query = object2query(obj.query || '')
query = object2query(obj.query || '')
path = obj.path + (query ? `?${query}` : '')
}
@ -210,11 +218,22 @@ class Router {
return
}
if (this.type === MODE_HASH) {
if (replace) {
location.replace(path.replace(/^\//, '#/'))
} else {
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() {
return () => new Router('hash')
return () => new Router()
}
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 序列化
*/