国内可以做的国外兼职网站,北京人力资源网站,微信推广的好处,seo 网站地图优化主页面搭建
页面主体结构
路由
子路由 主页面搭建
页面主体结构 在vuews目录下新建Layout.vue文件 主页面内容主体代码
script setup
import {Management,Promotion,UserFilled,User,Crop,EditPen,SwitchButton,CaretBottom
} from element-plus/icons-vue
imp…
主页面搭建
页面主体结构
路由
子路由 主页面搭建
页面主体结构 在vuews目录下新建Layout.vue文件 主页面内容主体代码
script setup
import {Management,Promotion,UserFilled,User,Crop,EditPen,SwitchButton,CaretBottom
} from element-plus/icons-vue
import avatar from /assets/default.png
/scripttemplateel-container classlayout-container!-- 左侧菜单 --el-aside width200pxdiv classel-aside__logo/divel-menu active-text-color#ffd04b background-color#232323 text-color#fffrouterel-menu-item el-iconManagement //el-iconspan文章分类/span/el-menu-itemel-menu-item el-iconPromotion //el-iconspan文章管理/span/el-menu-itemel-sub-menu template #titleel-iconUserFilled //el-iconspan个人中心/span/templateel-menu-item el-iconUser //el-iconspan基本资料/span/el-menu-itemel-menu-item el-iconCrop //el-iconspan更换头像/span/el-menu-itemel-menu-item el-iconEditPen //el-iconspan重置密码/span/el-menu-item/el-sub-menu/el-menu/el-aside!-- 右侧主区域 --el-container!-- 头部区域 --el-headerdiv用户strongacc/strong/divel-dropdown placementbottom-endspan classel-dropdown__boxel-avatar :srcavatar /el-iconCaretBottom //el-icon/spantemplate #dropdownel-dropdown-menuel-dropdown-item commandprofile :iconUser基本资料/el-dropdown-itemel-dropdown-item commandavatar :iconCrop更换头像/el-dropdown-itemel-dropdown-item commandpassword :iconEditPen重置密码/el-dropdown-itemel-dropdown-item commandlogout :iconSwitchButton退出登录/el-dropdown-item/el-dropdown-menu/template/el-dropdown/el-header!-- 中间区域 --el-maindiv stylewidth: 1290px; height: 570px;border: 1px solid red;内容展示区/div/el-main!-- 底部区域 --el-footer大事件 ©2024/el-footer/el-container/el-container
/templatestyle langscss scoped
.layout-container {height: 100vh;.el-aside {background-color: #232323;__logo {height: 120px;background: url(/assets/logo.png) no-repeat center / 120px auto;}.el-menu {border-right: none;}}.el-header {background-color: #fff;display: flex;align-items: center;justify-content: space-between;.el-dropdown__box {display: flex;align-items: center;.el-icon {color: #999;margin-left: 10px;}:active,:focus {outline: none;}}}.el-footer {display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666;}
}
/style
在App.vue中引入主页面文件 但是发现都在一个页面里面 路由
路由决定从起点到终点的路径的进程在前端工程中路由指的是根据不同的访问路径展示不同组件的内容Vue Router是Vue.js的官方路由
在项目目录下安装路由
npm install vue-router4 在src目录下创建 router再在router目录下创建router.js文件 创建路由器并导出 import {createRouter,createWebHistory} from vue-router;//导入组件
import LoginVue from /views/Login.vue
import LayoutVue from ./views/Layout.vue;//定义路由关系
const routes [{path:/login,component:LoginVue},{path:/,component:LayoutVue}
]//创建路由器
const router createRouter({history:createWebHistory(),routes:routes
})//导出路由
export default router 在main.js文件中应用实例中使用vue-router 修改App.vue文件声明router-view标签展示组件内容 templaterouter-view/
/templatescriptexport default {name: App,components: {}
}
/scriptstyle/style 浏览器访问查看路由 在登录页面Login.vue文件中设置登录成功时从登录页跳转切换到主页面 保存查看效果 子路由 在views目录下创建五个组件 ArticleCategory.vue
template文章分类
/template
ArticleManage.vue
template文章管理
/template UserAvatar.vue template更换头像
/template
UserInfo.vue
template基本资料
/template UserResetPassword.vue
template重置密码
/template
在router.js文件中配置子路由 //导入子路由组件
import ArticleCategoryVue from /views/ArticleCategory.vue
import ArticleManageVue from /views/ArticleManage.vue
import UserAvatarVue from /views/UserAvatar.vue
import UserInfoVue from /views/UserInfo.vue
import UserResetPasswordVue from /views/UserResetPassword.vue//定义路由关系
const routes [{path:/login,component:LoginVue},{path:/,component:LayoutVue,//重定向 为首页页面默认展示的子路由页面redirect: /article/manage,//子路由children: [{ path: /article/category, component: ArticleCategoryVue },{ path: /article/manage, component: ArticleManageVue },{ path: /user/info, component: UserInfoVue },{ path: /user/avatar, component: UserAvatarVue },{ path: /user/password, component: UserResetPasswordVue }]}
]
在Layout.vue文件中的中区区域代码部分 声明router-view标签 在Layout.vue主页面文件中为菜单项 el-menu-item 设置index属性为router子路由的路径一致设置点击后的路由路径 。 设置完成后即可完成点击菜单子路由页面跳转
