Compare commits
No commits in common. "master" and "1.3.2" have entirely different histories.
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wkitd",
|
||||
"version": "1.3.10",
|
||||
"version": "1.3.2",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
"files": [
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
//
|
||||
import { Component, html, css, raw } from 'wkit'
|
||||
import { object2query, query2object } from '../utils.js'
|
||||
import { object2query } from '../utils.js'
|
||||
import { __ROUTER_VIEW__, ROUTE_CALLBACKS } from '../constants.js'
|
||||
import { watch } from '../store.js'
|
||||
|
||||
|
@ -93,7 +93,7 @@ class RouterView extends Component {
|
|||
|
||||
class RouterLink extends Component {
|
||||
static props = {
|
||||
to: { type: null },
|
||||
to: Object,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
|
@ -107,8 +107,6 @@ class RouterLink extends Component {
|
|||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--router-link-gap, 0);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
|
@ -121,12 +119,12 @@ class RouterLink extends Component {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
`
|
||||
#to = { path: '' }
|
||||
|
||||
#href = ''
|
||||
|
||||
#navigate() {
|
||||
let type = this.$router.type
|
||||
|
||||
let { path } = this.to
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
|
@ -134,33 +132,25 @@ class RouterLink extends Component {
|
|||
if (type === 'hash') {
|
||||
location.hash = this.#href
|
||||
} else {
|
||||
this.$router.push(this.#to)
|
||||
this.$router.push(this.to)
|
||||
}
|
||||
}
|
||||
|
||||
#parsePath() {
|
||||
let path, query, params
|
||||
if (typeof this.to === 'string') {
|
||||
let tmp = this.to.split('?')
|
||||
path = tmp[0]
|
||||
params = tmp[1] || ''
|
||||
query = query2object(params)
|
||||
} else {
|
||||
path = this.to.path || ''
|
||||
query = this.to.query || {}
|
||||
params =
|
||||
typeof query === 'string'
|
||||
? query.replaceAll('?', '')
|
||||
: object2query(query)
|
||||
}
|
||||
let type = this.$router.type
|
||||
let { path = '', query = {} } = this.to
|
||||
let params =
|
||||
typeof query === 'string'
|
||||
? query.replaceAll('?', '')
|
||||
: object2query(query)
|
||||
|
||||
path = '/' + path.replace(/^\/+/, '')
|
||||
this.#to = { path, query }
|
||||
path = path.replace(/^\//, '')
|
||||
|
||||
if (params) {
|
||||
path += '?' + params
|
||||
}
|
||||
this.#href = path
|
||||
|
||||
return '/' + path
|
||||
}
|
||||
|
||||
activated() {
|
||||
|
@ -175,7 +165,7 @@ class RouterLink extends Component {
|
|||
if (this.removed) {
|
||||
return
|
||||
}
|
||||
this.classList.toggle('active', route.path === this.#to.path)
|
||||
this.classList.toggle('active', route.path === this.to.path)
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -184,7 +174,7 @@ class RouterLink extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
this.#parsePath()
|
||||
this.#href = this.#parsePath()
|
||||
return html`<a title=${this.#href} @click=${this.#navigate}
|
||||
><slot></slot
|
||||
></a>`
|
||||
|
|
|
@ -10,7 +10,7 @@ import { __ROUTER_VIEW__, ROUTE_CALLBACKS } from '../constants.js'
|
|||
|
||||
//hash前缀正则
|
||||
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'
|
||||
|
@ -23,7 +23,6 @@ class Router {
|
|||
|
||||
#ready = false
|
||||
#route = Object.create(null)
|
||||
#tmp = null
|
||||
|
||||
#beforeEach
|
||||
|
||||
|
@ -70,7 +69,7 @@ class Router {
|
|||
if (_prefix === '/') {
|
||||
_prefix = '/?'
|
||||
}
|
||||
return _prefix + '([\\$\\!@~A-Za-z0-9_=\\-]+)' + _require
|
||||
return _prefix + '([A-Za-z0-9_]+)' + _require
|
||||
}
|
||||
)
|
||||
|
||||
|
@ -106,10 +105,6 @@ class Router {
|
|||
;[path, query] = path.split('?')
|
||||
}
|
||||
path = path.replace(PREFIX_REGEXP, '/')
|
||||
// 修正默认主页,以支持带路径访问的首页
|
||||
if (path === '/index.html') {
|
||||
path = '/'
|
||||
}
|
||||
|
||||
if (!$view || path === this.#route.path) {
|
||||
// query不同, 只更新query
|
||||
|
@ -121,6 +116,7 @@ class Router {
|
|||
}
|
||||
|
||||
for (let [k, route] of this.#tables) {
|
||||
console.log(route, path.match(route.regexp))
|
||||
let args = path.match(route.regexp)
|
||||
if (args) {
|
||||
let params = Object.create(null)
|
||||
|
@ -133,12 +129,12 @@ class Router {
|
|||
params,
|
||||
query: query2object(query)
|
||||
}
|
||||
Object.defineProperty(next, 'raw', { value: route.path })
|
||||
if (this.#beforeEach) {
|
||||
return this.#beforeEach(this.route, next, () => {
|
||||
this.#exec(next)
|
||||
})
|
||||
}
|
||||
|
||||
return this.#exec(next)
|
||||
}
|
||||
}
|
||||
|
@ -147,26 +143,13 @@ class Router {
|
|||
$view.current = route.name
|
||||
this.#route = { path, name: route.name, params: {}, query: {} }
|
||||
this.#exec(this.#route)
|
||||
} else {
|
||||
if (this.#tmp) {
|
||||
this.#exec(this.#tmp)
|
||||
this.#tmp = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#exec(route) {
|
||||
let $view = window.wkitd.get(__ROUTER_VIEW__)
|
||||
let table = this.#tables.get(route.raw)
|
||||
$view.current = route.name
|
||||
this.#route = route
|
||||
|
||||
if (table && typeof table.component === 'function') {
|
||||
if (!customElements.get(route.name)) {
|
||||
table.component()
|
||||
delete table.component //避免多次请求
|
||||
}
|
||||
}
|
||||
this.#broadcast()
|
||||
}
|
||||
|
||||
|
@ -233,9 +216,6 @@ class Router {
|
|||
return
|
||||
}
|
||||
|
||||
// 缓存当前路由信息, 当没有匹配到正确的路由时, 回调此缓存
|
||||
this.#tmp = obj
|
||||
|
||||
if (this.type === MODE_HASH) {
|
||||
if (replace) {
|
||||
location.replace(path.replace(/^\//, '#/'))
|
||||
|
|
Loading…
Reference in New Issue