完成history路由开发
parent
56d087dbe9
commit
80a58ac116
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
13
src/utils.js
13
src/utils.js
|
@ -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 序列化
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue