diff --git a/package.json b/package.json index ad90aec..6f2f87d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wkitd", - "version": "1.3.8", + "version": "1.3.9", "type": "module", "main": "dist/index.js", "files": [ diff --git a/src/router/router-components.js b/src/router/router-components.js index 666a7fe..93d59e4 100644 --- a/src/router/router-components.js +++ b/src/router/router-components.js @@ -1,6 +1,6 @@ // import { Component, html, css, raw } from 'wkit' -import { object2query } from '../utils.js' +import { object2query, query2object } 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: Object, + to: { type: null }, disabled: false } @@ -120,11 +120,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 } @@ -132,26 +133,33 @@ class RouterLink extends Component { if (type === 'hash') { location.hash = this.#href } else { - this.$router.push(this.to) + this.$router.push(this.#to) } } #parsePath() { - let type = this.$router.type - let { path = '', query = {} } = this.to - let params = - typeof query === 'string' - ? query.replaceAll('?', '') - : object2query(query) + 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) + } path = '/' + path.replace(/^\/+/, '') - this.to = { path, query } + this.#to = { path, query } if (params) { path += '?' + params } - - return path + this.#href = path } activated() { @@ -166,7 +174,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) }) } @@ -175,7 +183,7 @@ class RouterLink extends Component { } render() { - this.#href = this.#parsePath() + this.#parsePath() return html`` diff --git a/src/router/router-engine.js b/src/router/router-engine.js index eb94fbf..c3bab17 100644 --- a/src/router/router-engine.js +++ b/src/router/router-engine.js @@ -129,6 +129,7 @@ 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) @@ -152,7 +153,7 @@ class Router { #exec(route) { let $view = window.wkitd.get(__ROUTER_VIEW__) - let table = this.#tables.get(route.path) + let table = this.#tables.get(route.raw) $view.current = route.name this.#route = route @@ -228,6 +229,7 @@ class Router { return } + // 缓存当前路由信息, 当没有匹配到正确的路由时, 回调此缓存 this.#tmp = obj if (this.type === MODE_HASH) {