3小时网站建设平台,学校网站开发模式,怎么做跳转网站,网站建立价格首先搭建项目需要先通过步骤搭建一个vue的项目#xff0c;然后创建一个component文件#xff0c;里面新建一个index.vue页面来。
这是引入的element-ui组件库里的组件#xff0c;来实现我的路由#xff0c;渲染的是我存储的动态路由#xff0c;所以需要先安装并且引用。 …首先搭建项目需要先通过步骤搭建一个vue的项目然后创建一个component文件里面新建一个index.vue页面来。
这是引入的element-ui组件库里的组件来实现我的路由渲染的是我存储的动态路由所以需要先安装并且引用。
npm install element-plus element-plus/icons-vue
这是菜单管理的
templatediv classsidebar-container!-- 折叠控制 --div classcollapse-control stylebackground-color:#293246 clicktoggleCollapseel-icon :size20 :colorisCollapse ? #fff : #ffd04bcomponent :isisCollapse ? Expand : Fold //el-icon/div!-- 导航菜单 --divel-menu router :default-active$route.path background-color#293246 text-color#fff styleheight: 100vhactive-text-color#ffd04b :collapseisCollapsetemplate v-formenu in menuArray :keymenu.path!-- 有子级的多层菜单项 --el-sub-menu v-ifmenu.children?.length index/layouttemplate #titlespan{{ menu.meta.title }}/span/templateel-menu-item v-forsub in menu.children :key/layout sub.path :index/layout sub.pathspan{{ sub.title }}/span/el-menu-item/el-sub-menu!-- 没子级的单层菜单项 --el-menu-item v-else :indexmenu.path /home ? menu.path : menu.pathspan{{ menu.meta.title }}/span/el-menu-item/template/el-menu/div/div
/template
script setup
import { ref } from vue
import { Expand, Fold } from element-plus/icons-vue
const isCollapse ref(false)
const toggleCollapse () {isCollapse.value !isCollapse.value
}
const menuArray ref([]);
render();//初始化渲染
function render() {try {const menuList JSON.parse(sessionStorage.getItem(menuPath) || []);const menuName JSON.parse(sessionStorage.getItem(menuName) || []);console.log(menuList, menuName);if (!Array.isArray(menuList) || !Array.isArray(menuName)) {throw new Error(存储数据格式不正确);}const nameMap new Map(menuName.map(item [item.name, item]));menuArray.value menuList.filter(item item?.name nameMap.has(item.name)).map(item ({...item,...nameMap.get(item.name)}));console.log(安全筛选结果, menuArray.value);} catch (error) {console.error(数据处理失败, error);// 可以在这里设置默认值或进行错误上报return [];}
}
/script
style scoped
.sidebar-container {transition: width 0.3s;
}.collapse-control {padding: 15px;cursor: pointer;border-bottom: 1px solid #1f2d3d;
}.el-menu--collapse {width: 64px;
}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;
}
/style
组件面包屑
template!-- div stylemargin-bottom: 20px;width: 100%;el-button sizesmall clickaddTab(editableTabsValue)添加标签页/el-button/div --el-tabs v-modeleditableTabsValue tab-clicktabBread typecard tab-removeremoveTabel-tab-pane v-foritem in editableTabs :keyitem.name :labelitem.title:nameitem.name :closableitem.name ! /home!-- 主页面 --el-mainrouter-view //el-main/el-tab-pane/el-tabs
/templatescript setup
import { ref, reactive, watch } from vue;
import { useRoute, useRouter } from vue-router;const route useRoute();
const router useRouter();const editableTabsValue ref(route.path);
const editableTabs reactive([{ title: 首页, name: /home }
]);// 监听路由变化同步标签页
watch(() route.path,(newPath) {editableTabsValue.value newPath;if (!editableTabs.some(tab tab.name newPath)) {const title getTitleFromPath(newPath);editableTabs.push({ title, name: newPath });}},{ immediate: true }
);function getTitleFromPath(path) {const titleMap {/home: 首页,/layout/user/list: 用户列表,/layout/user/role: 角色列表,// 扩展其他路由...};return titleMap[path] || 新标签;
}
// 点击面包屑标签跳转路由
const tabBread () {console.log(editableTabsValue.value);router.push(editableTabsValue.value);
}
const removeTab (targetName) {const tabs editableTabs;let activeName editableTabsValue.value;if (activeName targetName) {const currentIndex tabs.findIndex(tab tab.name targetName);const nextTab tabs[currentIndex 1] || tabs[currentIndex - 1];activeName nextTab?.name || /home;router.push(activeName);}editableTabsValue.value activeName;editableTabs.splice(0, editableTabs.length, ...tabs.filter(tab tab.name ! targetName));
};
/scriptstyle scoped
/* 可以添加自定义样式 */
.el-tabs {margin: 20px;
}
/style
这部分代码是用来布局菜单框架结构的然后我们在路由部分引入这个文件的路由即可。
!-- src/layouts/MainLayout.vue --
templatediv classappel-container styleheight: 100vh;!-- 左侧导航栏 --el-aside width200pxaside-nav //el-asidediv classmenu!-- 顶部菜单 --MyHeader //div/el-container/div
/templatescript
import MyHeader from /Layout/topHeader.vue
import AsideNav from /components/MenuItem.vueexport default {components: {MyHeader,AsideNav}
}
/scriptstyle
html,
body {padding: 0;margin: 0;
}.menu {width: 100%;
}
/style
