实现一个简单的路由

2026-09-21 22:30:45 +08:00 · 2025-09-24 13:47:24 +08:00
parent 5620df010c
commit f2fb339e30
3 changed files with 44 additions and 3 deletions
@@ -20,6 +20,13 @@
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/css/main.css" />
    <link rel="stylesheet" href="/css/sponsor.css" />
+
+    <!-- 设置默认路由 -->
+    <script>
+      if (!window.location.hash) {
+        window.location.hash = 'home';
+      }
+    </script>
  </head>
  <body class="bg-gray-50">
    <div id="app">
@@ -5,7 +5,7 @@ const { createApp } = Vue
 const App = {
  data() {
    return {
-      currentPage: 'home',
+      currentPage: Utils.getCurrentPage(), // 从URL获取当前页面
      showConfigModal: false,
      showLicenseModal: false,
      showResultModal: false,
@@ -68,6 +68,17 @@ const App = {
    // 加载主题设置
    Utils.loadTheme()

+    // 监听路由变化
+    this.handleHashChange = () => {
+      this.currentPage = Utils.getCurrentPage()
+      this.searchQuery = ''
+      // 重置过滤结果
+      this.filteredProducts = [...this.products]
+      this.filteredPlugins = [...this.plugins]
+    }
+
+    Utils.onHashChange(this.handleHashChange)
+
    // 监听滚动事件
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
@@ -82,6 +93,11 @@ const App = {
  },

  beforeUnmount() {
+    // 清理路由监听器
+    if (this.handleHashChange) {
+      Utils.removeHashChangeListener(this.handleHashChange)
+    }
+
    // 清理滚动事件监听器
    if (this._handleScroll) {
      window.removeEventListener('scroll', this._handleScroll)
@@ -232,8 +248,7 @@ const App = {

    // 页面跳转
    navigateTo(page) {
-      this.currentPage = page
-      this.searchQuery = ''
+      Utils.navigateToPage(page)
    },

    // 返回顶部
@@ -180,6 +180,25 @@ const Utils = {
  // 获取当前主题
  getCurrentTheme() {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+  },
+
+  // 路由管理
+  getCurrentPage() {
+    const hash = window.location.hash.slice(1) // 移除 # 号
+    const validPages = ['home', 'products', 'plugins', 'jrebel', 'sponsor']
+    return validPages.includes(hash) ? hash : 'home'
+  },
+
+  navigateToPage(page) {
+    window.location.hash = page
+  },
+
+  onHashChange(callback) {
+    window.addEventListener('hashchange', callback)
+  },
+
+  removeHashChangeListener(callback) {
+    window.removeEventListener('hashchange', callback)
  }
 }