完成history路由开发

src/router/router-components.js

@@ -106,7 +106,7 @@ class RouterLink extends Component {
     if (type === 'hash') {
       location.hash = this.#href
     } else {
-      window.history.pushState({ path }, null, this.#href)
+      this.$router.push(this.to)
     }
   }
 

src/router/router-engine.js

@@ -11,8 +11,11 @@ import { noop, query2object, object2query } from '../utils.js'
 const PREFIX_REGEXP = /^(#!|#)[\/]+?/
 const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g
 
+const MODE_HASH = 'hash'
+const MODE_HISTORY = 'history'
+
 class Router {
-  type = 'hash'
+  type = MODE_HASH
 
   #tables = new Map()
   #views = new Set()
@@ -24,7 +27,7 @@ class Router {
 
   #beforeEach
 
-  constructor(type = 'hash') {
+  constructor(type = MODE_HASH) {
     this.type = type
     bind(window, 'popstate', this.#hashchange.bind(this))
   }
@@ -91,8 +94,12 @@ class Router {
 
   // 路由检测
   #check() {
+    let isHash = this.type === MODE_HASH
     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
 
     if (path.includes('?')) {
@@ -197,11 +204,12 @@ class Router {
 
   //
   push(obj = { path: '', query: {} }, replace = false) {
-    let path = ''
-    if (typeof path === 'string') {
+    let path = '',
+      query = ''
+    if (typeof obj === 'string') {
       path = obj.trim()
     } else {
-      let query = object2query(obj.query || '')
+      query = object2query(obj.query || '')
       path = obj.path + (query ? `?${query}` : '')
     }
 
@@ -210,10 +218,21 @@ class Router {
       return
     }
 
-    if (replace) {
-      location.replace(path.replace(/^\//, '#/'))
+    if (this.type === MODE_HASH) {
+      if (replace) {
+        location.replace(path.replace(/^\//, '#/'))
+      } else {
+        location.hash = path
+      }
     } else {
-      location.hash = path
+      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() {
-  return () => new Router('hash')
+  return () => new Router()
 }
 
 export function createWebHistory() {
-  return () => new Router('history')
+  return () => new Router(MODE_HISTORY)
 }

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 序列化
  */