企业网站备案系统,杭州余杭区网站建设,软文推广新闻发布,网站开发国内外研究现状上篇介绍了前端项目部署以及基本依赖的应用#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
