From def9df101e71b77c3b60d64f61d081fbc85caf82 Mon Sep 17 00:00:00 2001 From: Anyon Date: Sat, 15 Jan 2022 18:19:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B5=8C=E5=A5=97=E8=B7=AF?= =?UTF-8?q?=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- static/app.js | 61 ++++++++++++++++++++++++-------------- static/template/layout.vue | 12 +------- static/template/login.vue | 39 +++++++++++++++++++----- 4 files changed, 71 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 7688af064..223bdce72 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ - + \ No newline at end of file diff --git a/static/app.js b/static/app.js index 0086177df..219474597 100644 --- a/static/app.js +++ b/static/app.js @@ -32,12 +32,26 @@ const {loadModule} = window['vue3-sfc-loader']; const loadVue = (vuePath) => loadModule(vuePath, options); // const loadVueFile = (vuePath) => () => loadVue(vuePath); + const router = VueRouter.createRouter({ routes: [], history: VueRouter.createWebHashHistory(), }); - // 添加默认路由 - router.addRoute({path: '/', redirect: '/static/template/pages/one.vue'}); + // 创建后台主路由 + router.addRoute({ + name: 'layout', path: '/', component: () => { + return loadVue('/static/template/layout.vue'); + }, children: [ + {path: '/', redirect: '/static/template/login.vue'}, + ] + }); + + // 动态注销路由 + router.afterEach(function (to) { + let name = to.fullPath.replace(/[.\/]+/g, '_'); + if (router.hasRoute(name)) router.removeRoute(name) + if (loading) loading = loading.close(), null; + }); // 动态注册路由 let loading = null; @@ -50,39 +64,40 @@ }); next(); } else { - // 删除页面缓存，重新加载 + // 删除页面缓存 delete options.moduleCache[to.fullPath]; - // 动态注册路由并触发新路由 - router.addRoute({name: name, path: to.fullPath, component: () => loadVue(to.fullPath)}); + // 登录页面处理 + if (to.fullPath === '/static/template/login.vue') { + router.addRoute({name: name, path: to.fullPath, component: () => loadVue(to.fullPath)}) + } else { + // 动态注册路由并触发新路由 + router.addRoute('layout', {name: name, path: to.fullPath, component: () => loadVue(to.fullPath)}); + } next({name: name}); } }); - // 动态注销路由 - router.afterEach(function (to) { - let name = to.fullPath.replace(/[.\/]+/g, '_'); - if (router.hasRoute(name)) router.removeRoute(name) - if (loading) loading = loading.close(), null; - }); - // 创建 Vue 应用 - const app = Vue.createApp(Vue.defineAsyncComponent(function () { - return loadVue('/static/template/layout.vue'); - })); + const app = Vue.createApp({}); - // 定义全局缓存 - app.cache = { - loadOpt: options, - loadVue: loadVue, - }; - - // 全局字体文件 + // 定义全局缓存，加载字体组件 + app.cache = {loadOpt: options, loadVue: loadVue}; app.cache.icons = await loadVue("/static/plugs/core/vue.element.icons.js"); for (let i in app.cache.icons) app.component(i, app.cache.icons[i]); - // 注册获取应用 + // 注册 getApp 获取应用 window.getApp = () => app; + // 绑定 data-route 路由处理 + document.addEventListener('click', function (event) { + event.path.some(function (ele) { + if (ele.dataset && ele.dataset.route) { + router.push(ele.dataset.route); + return true; + } + }); + }); + // 应用组件及路由 app.use(ElementPlus).use(router).mount(document.body); diff --git a/static/template/layout.vue b/static/template/layout.vue index 36f68c94e..de2a23174 100644 --- a/static/template/layout.vue +++ b/static/template/layout.vue @@ -30,7 +30,7 @@ 个人中心 安全设置 清空缓存 - 退出登录 + 退出登录 @@ -316,16 +316,6 @@ export default { }, created() { let app = this; - - // data-route 路由处理 - document.addEventListener('click', function (event) { - event.path.some(function (ele) { - if (ele.dataset && ele.dataset.route) { - app.$router.push(ele.dataset.route); - return true; - } - }); - }) } } diff --git a/static/template/login.vue b/static/template/login.vue index 340dafe69..7f6bcc5f6 100644 --- a/static/template/login.vue +++ b/static/template/login.vue @@ -1,13 +1,36 @@ - - - \ No newline at end of file