企业网站备案系统,外贸电商怎么做,做网销的网站,canvas做的网站上篇介绍了前端项目部署以及基本依赖的应用#xff0c;这次主要对于路由以及布局进行模块化处理 一、 创建layout模块 1、新建src/layout/index.vue
templateel-container classcommon-layout!-- el-aside classaside这次主要对于路由以及布局进行模块化处理 一、 创建layout模块 1、新建src/layout/index.vue
templateel-container classcommon-layout!-- el-aside classasideAside//el-aside --el-containerel-header classheaderHeader//el-headerel-main classmainrouter-view/router-view/el-mainel-footer classfooterCopyright © 2020 云风网, All rights reserved. 京ICP备20002789号-1/el-footer/el-container/el-container
/templatescript setup langts
// import Aside from ./components/aside.vue
import Header from ./components/header.vue/scriptstyle langscss scoped
import /assets/styles/mixins.scss;
.common-layout{width: 100%;height: 100vh;.aside{height: 100vh;width: 200px;}.header{height: 60px;padding: 0;}.main{include scrollBar;}.footer{height: 60px;background-color: #343a40;color: #fff;line-height: 60px;}
}/style
2、新建头部组件src/layout/components/header.vue
templateel-menu:default-activeactiveIndexclassheader-containermodehorizontal:ellipsisfalseselecthandleSelectel-menu-item index0imgclasslogosrc/assets/logo.svgaltlogo//el-menu-itemnavbar-itemv-for(route, index) in routerList:keyroute.path index:itemroute:base-pathroute.path:is-nestfalse//el-menu
/templatescript setup langts
import NavbarItem from ./navbarItem.vue;
import { useRouter} from vue-router;
const router useRouter();const activeIndex ref(1)
const routerList router.getRoutes();
console.log(routerList,routerList);
const handleSelect (key: string, keyPath: string[]) {console.log(key, keyPath)
}
/scriptstyle langscss scoped
.el-menu--horizontal .el-menu-item:nth-child(1) {margin-right: auto;
}
.header-container{height: 100%;padding: 0 50px;background-color: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);.logo{width: 40px;}
}
/style 3、新建菜单组件src/layout/components/navbarItem.vue
templatediv v-if!item.hiddentemplate v-ifhasOneShowingChild(item.children, item) (!onlyOneChild.children || onlyOneChild.noShowingChildren)app-link v-ifonlyOneChild.meta.title :toresolvePath(onlyOneChild.path, onlyOneChild.query)el-menu-item :indexresolvePath(onlyOneChild.path,) clickhandleClick(item.path)svg-icon :icon-classonlyOneChild.meta.icon || (item.meta item.meta.icon) /template #titlespan classmenu-title :titlehasTitle(onlyOneChild.meta.title){{ onlyOneChild.meta.title }}/span/template/el-menu-item/app-link/templateel-sub-menu v-else refsubMenu :indexresolvePath(item.path,) teleportedtemplate v-ifitem.meta #titlesvg-icon :icon-classitem.meta item.meta.icon /span classmenu-title :titlehasTitle(item.meta.title){{ item.meta.title }}/span/templateapp-link v-forchild in item.children :keychild.path :toresolvePath(child.path, )el-menu-item:itemchildclassnest-menuclickhandleClick(child.path)template #titlespan classmenu-title{{ child.meta.title }}/span/template/el-menu-item/app-link/el-sub-menu/div/templatescript setup langtsimport { isExternal } from /utils/validate.tsimport AppLink from ./Link.vueimport { getNormalPath } from /utils/misinterface MenuItem {path: string;meta?: {icon?: string;title?: string;[key: string]: any;};query?: string;children?: MenuItem[];hidden?: boolean;noShowingChildren?: boolean;}const props defineProps{item: MenuItem;isNest: boolean;basePath: string;}();const onlyOneChild refMenuItem({ path: , meta: {} });function hasOneShowingChild(children: MenuItem[] [], parent: MenuItem): boolean {const showingChildren children.filter(item {if (item.hidden) {return false;} else {onlyOneChild.value item;return true;}});if (showingChildren.length 1) {return true;}if (showingChildren.length 0) {onlyOneChild.value { ...parent, path: , noShowingChildren: true, meta: {} };return true;}return false;}function handleClick(routePath: string) {localStorage.setItem(routePath, routePath);}function resolvePath(routePath: string, routeQuery?: string) {if (isExternal(routePath)) {return routePath;}if (isExternal(props.basePath)) {return props.basePath;}if (routeQuery) {let query JSON.parse(routeQuery);return { path: getNormalPath(${props.basePath}/${routePath}), query };}return getNormalPath(${props.basePath}/${routePath});}function hasTitle(title: string | undefined): string {return title title.length 5 ? title : ;}/script4、新建菜单组件src/layout/components/Link.vue
templatecomponent :istype v-bindlinkProps()slot //component
/templatescript setup langts
import { isExternal } from /utils/validate.tsconst props defineProps({to: {type: [String, Object],required: true}
})const isExt computed(() {return isExternal(props.to)
})const type computed(() {if (isExt.value) {return a}return router-link
})function linkProps() {if (isExt.value) {return {href: props.to,target: _blank,rel: noopener}}return {to: props.to}
}
/script
5、新建方法封装文件src/utils/validate.ts
/*** 判断url是否是http或https * param {string} path* returns {Boolean}*/export function isHttp(url) {return url.indexOf(http://) ! -1 || url.indexOf(https://) ! -1
}/*** 判断path是否为外链* param {string} path* returns {Boolean}*/export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)
}/*** param {string} str* returns {Boolean}*/
export function validUsername(str) {const valid_map [admin, editor]return valid_map.indexOf(str.trim()) 0
}/*** param {string} url* returns {Boolean}*/
export function validURL(url) {const reg /^(https?|ftp):\/\/([a-zA-Z0-9.-](:[a-zA-Z0-9.%$-])*)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]\.)*[a-zA-Z0-9-]\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9])*(\/($|[a-zA-Z0-9.,?\\%$#~_-]))*$/return reg.test(url)
}/*** param {string} str* returns {Boolean}*/
export function validLowerCase(str) {const reg /^[a-z]$/return reg.test(str)
}/*** param {string} str* returns {Boolean}*/
export function validUpperCase(str) {const reg /^[A-Z]$/return reg.test(str)
}/*** param {string} str* returns {Boolean}*/
export function validAlphabets(str) {const reg /^[A-Za-z]$/return reg.test(str)
}/*** param {string} email* returns {Boolean}*/
export function validEmail(email) {const reg /^(([^()\[\]\\.,;:\s](\.[^()\[\]\\.,;:\s])*)|(.))((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]\.)[a-zA-Z]{2,}))$/return reg.test(email)
}/*** param {string} str* returns {Boolean}*/
export function isString(str) {if (typeof str string || str instanceof String) {return true}return false
}/*** param {Array} arg* returns {Boolean}*/
export function isArray(arg) {if (typeof Array.isArray undefined) {return Object.prototype.toString.call(arg) [object Array]}return Array.isArray(arg)
}
二、修改router/index.ts
import { createRouter, createWebHistory } from vue-router
import Layout from /layout/index.vue
//公共路由
export const constantRoutes [{path: /,component: Layout,redirect: /home,hidden: false,children: [{path: home,name: Home,meta:{ title: 系统知识,routerNum: 0},component: () import(/views/Home.vue)}]},{path: /,redirect: /article,component: Layout,hidden: false,children: [{path: article,name: Article,meta:{ title: 插件管理,routerNum: 1},component: () import(/views/Article.vue)}]},{path: /,redirect: /mix,component: Layout,hidden: false,meta:{ title: 多级菜单,routerNum: 0},children: [{path: home,name: Home,meta:{ title: 系统知识,routerNum: 0},component: () import(/views/Home.vue)},{path: article,name: Article,meta:{ title: 插件管理,routerNum: 1},component: () import(/views/Article.vue)}]},// {// path: /article/:id,// name: Article,// meta:{ title: 插件管理,routerNum: 1},// component: () import(/views/Article.vue)// }
]
const router createRouter({history: createWebHistory(),routes: constantRoutes
})export default router
