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