调整指令

static/app.js

@@ -1,15 +1,14 @@
 ;(async () => {
 
     /*! 项目应用根路径 */
-    window.appRoot = (function (script) {
-        return '/' + script.src.split('/').slice(3, -2).join('/') + '/';
-    })(document.querySelector('script[src*="app.js"]'));
+    window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/';
 
     /*! 模块加载请求处理 */
     const options = {
-        moduleCache: {
-            vue: Vue, less: less
-        }, getFile(url) {
+        // 模块缓存
+        moduleCache: {vue: Vue, less: less},
+        // 动态加载文件
+        getFile(url) {
             if (!(/^(https?:)?\/\//)) {
                 url = (appRoot + url).replace(/\/+.?\/+/g, '/');
             }
@@ -22,11 +21,17 @@
                     throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                 }
             });
-        }, addStyle(style) {
+        },
+        // 追加样式HTML
+        addStyle(style) {
             const before = document.head.getElementsByTagName('style')[0] || null;
             const object = Object.assign(document.createElement('style'), {textContent: style});
             document.head.insertBefore(object, before);
         },
+        // 输出日志信息
+        log(type, ...args) {
+            console.log(type, ...args);
+        },
     };
 
     const {loadModule} = window['vue3-sfc-loader'];
@@ -48,9 +53,7 @@
         let name = to.fullPath.replace(/[.\/]+/g, '_');
         if (router.hasRoute(name)) router.removeRoute(name)
         if (loading) loading = loading.close(), null;
-        document.querySelectorAll('.think-page-loader').forEach(function (el) {
-            el.style.display = 'none';
-        });
+        document.querySelectorAll('.think-page-loader').forEach((el) => el.style.display = 'none');
     });
 
     // 动态注册路由
@@ -79,6 +82,22 @@
 
     // 创建 Vue 应用
     const app = Vue.createApp({});
+    app.directive('href', {
+        mounted(el, binding) {
+            console.log(el)
+            el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (binding.value) {
+                    router.push(binding.value);
+                }
+            }, {passive: false})
+        },
+        unmounted(el) {
+            // 移除点击事件监听器
+            el.removeEventListener('click');
+        }
+    })
+
 
     // 定义全局缓存，加载字体组件
     app.cache = {loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue};
@@ -87,19 +106,6 @@
     // 注册 getApp 获取应用
     window.getApp = () => app;
 
-    // 绑定 data-route 路由处理
-    document.body.addEventListener('click', function (event) {
-        let target = event.target, attrname = 'data-router';
-        while (target && !target.hasAttribute(attrname)) {
-            target = target.parentElement;
-            if (target && target.hasAttribute(attrname)) break;
-        }
-        if (target && target.hasAttribute(attrname)) {
-            event.stopPropagation();
-            router.push(target.dataset.route);
-        }
-    });
-
     // 应用组件及路由
     app.use(ElementPlus).use(router).mount(document.body);
 

static/template/layout.vue

@@ -54,24 +54,24 @@
                   <span>Navigator One</span>
                 </template>
 
-                <el-menu-item index="1-1" data-route="/static/template/pages/one.vue">item one route</el-menu-item>
-                <el-menu-item index="1-2" data-route="/static/template/pages/two.vue">item two route</el-menu-item>
-                <el-menu-item index="1-3" data-route="/static/template/pages/thr.vue">item Three route</el-menu-item>
+                <el-menu-item index="1-1" v-href="`/static/template/pages/one.vue`">item one route</el-menu-item>
+                <el-menu-item index="1-2" v-href="`/static/template/pages/two.vue`">item two route</el-menu-item>
+                <el-menu-item index="1-3" v-href="`/static/template/pages/thr.vue`">item Three route</el-menu-item>
 
               </el-sub-menu>
-              <el-menu-item index="2" data-route="/static/template/pages/two.vue">
+              <el-menu-item index="2" v-href="`/static/template/pages/two.vue`">
                 <el-icon>
                   <aim></aim>
                 </el-icon>
                 <span>Navigator Two</span>
               </el-menu-item>
-              <el-menu-item index="3" data-route="/static/template/pages/thr.vue">
+              <el-menu-item index="3" v-href="`/static/template/pages/thr.vue`">
                 <el-icon>
                   <document></document>
                 </el-icon>
                 <span>Navigator Three</span>
               </el-menu-item>
-              <el-menu-item index="4" data-route="/static/template/pages/four.vue">
+              <el-menu-item index="4" v-href="`/static/template/pages/four.vue`">
                 <el-icon>
                   <setting></setting>
                 </el-icon>

static/template/login.vue

@@ -10,7 +10,7 @@
       <el-input v-model="login.verify" placeholder="请输入图形验证"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" data-route="/static/template/pages/one.vue">登录</el-button>
+      <el-button type="primary" v-href="`/static/template/pages/one.vue`">登录</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -26,7 +26,7 @@
 </style>
 
 <script lang="ts" setup>
-import {reactive, ref} from 'vue'
+import {reactive} from 'vue'
 
 const login = reactive({
   verify: '',