修复异步路由加载逻辑; 优化router-link组件的赋值

master 1.3.9
yutent 2024-05-11 15:20:34 +08:00
parent 37dcc51e05
commit d3a00a319f
3 changed files with 27 additions and 17 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "wkitd", "name": "wkitd",
"version": "1.3.8", "version": "1.3.9",
"type": "module", "type": "module",
"main": "dist/index.js", "main": "dist/index.js",
"files": [ "files": [

View File

@ -1,6 +1,6 @@
// //
import { Component, html, css, raw } from 'wkit' 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 { __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: Object, to: { type: null },
disabled: false disabled: false
} }
@ -120,11 +120,12 @@ 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
} }
@ -132,26 +133,33 @@ 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 type = this.$router.type let path, query, params
let { path = '', query = {} } = this.to if (typeof this.to === 'string') {
let params = let tmp = this.to.split('?')
typeof query === 'string' path = tmp[0]
? query.replaceAll('?', '') params = tmp[1] || ''
: object2query(query) query = query2object(params)
} 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() {
@ -166,7 +174,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)
}) })
} }
@ -175,7 +183,7 @@ class RouterLink extends Component {
} }
render() { render() {
this.#href = this.#parsePath() 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>`

View File

@ -129,6 +129,7 @@ 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)
@ -152,7 +153,7 @@ class Router {
#exec(route) { #exec(route) {
let $view = window.wkitd.get(__ROUTER_VIEW__) 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 $view.current = route.name
this.#route = route this.#route = route
@ -228,6 +229,7 @@ class Router {
return return
} }
// 缓存当前路由信息, 当没有匹配到正确的路由时, 回调此缓存
this.#tmp = obj this.#tmp = obj
if (this.type === MODE_HASH) { if (this.type === MODE_HASH) {