blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

增加嵌套路由

Browse Source
This commit is contained in:
Anyon 2022-01-15 18:19:50 +08:00
parent 4b21a1241b
commit def9df101e
4 changed files with 71 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -26,7 +26,7 @@
</head> </head>
<body> <body>
<layout></layout> <router-view></router-view>
</body> </body>
</html> </html>

61
static/app.js
View File

@ -32,12 +32,26 @@
const {loadModule} = window['vue3-sfc-loader']; const {loadModule} = window['vue3-sfc-loader'];
const loadVue = (vuePath) => loadModule(vuePath, options); const loadVue = (vuePath) => loadModule(vuePath, options);
// const loadVueFile = (vuePath) => () => loadVue(vuePath); // const loadVueFile = (vuePath) => () => loadVue(vuePath);
const router = VueRouter.createRouter({ const router = VueRouter.createRouter({
routes: [], history: VueRouter.createWebHashHistory(), 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; let loading = null;
@ -50,39 +64,40 @@
}); });
next(); next();
} else { } else {
// 删除页面缓存，重新加载 // 删除页面缓存
delete options.moduleCache[to.fullPath]; 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}); 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 应用 // 创建 Vue 应用
const app = Vue.createApp(Vue.defineAsyncComponent(function () { const app = Vue.createApp({});
return loadVue('/static/template/layout.vue');
}));
// 定义全局缓存 // 定义全局缓存，加载字体组件
app.cache = { app.cache = {loadOpt: options, loadVue: loadVue};
loadOpt: options,
loadVue: loadVue,
};
// 全局字体文件
app.cache.icons = await loadVue("/static/plugs/core/vue.element.icons.js"); 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]); for (let i in app.cache.icons) app.component(i, app.cache.icons[i]);
// 注册获取应用 // 注册 getApp 获取应用
window.getApp = () => app; 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); app.use(ElementPlus).use(router).mount(document.body);

12
static/template/layout.vue
View File

@ -30,7 +30,7 @@
<el-menu-item index="2-1">个人中心</el-menu-item> <el-menu-item index="2-1">个人中心</el-menu-item>
<el-menu-item index="2-2">安全设置</el-menu-item> <el-menu-item index="2-2">安全设置</el-menu-item>
<el-menu-item index="2-3">清空缓存</el-menu-item> <el-menu-item index="2-3">清空缓存</el-menu-item>
<el-menu-item index="2-4">退出登录</el-menu-item> <el-menu-item data-route="/static/template/login.vue" index="2-4">退出登录</el-menu-item>
</el-sub-menu> </el-sub-menu>
</el-menu> </el-menu>
@ -316,16 +316,6 @@ export default {
}, },
created() { created() {
let app = this; 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;
}
});
})
} }
} }
</script> </script>

39
static/template/login.vue
View File

@ -1,13 +1,36 @@
<template> <template>
<el-form class="loginForm" label-width="100px" :model="login" style="max-width:460px">
<el-form-item label="登录账号">
<el-input v-model="login.username" placeholder="请输入登录账号"></el-input>
</el-form-item>
<el-form-item label="登录密码">
<el-input v-model="login.password" placeholder="请输入登录密码"></el-input>
</el-form-item>
<el-form-item label="图形验证">
<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-form-item>
</el-form>
</template> </template>
<script> <style lang="less">
export default { .loginForm {
name: "login" top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -230px;
} }
</style>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
const login = reactive({
verify: '',
username: '',
password: '',
});
</script> </script>
<style scoped>
</style>