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