本文主要是介绍（Vue3）大事记管理系统 首页 文章分类页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
首页
先搭架子-用element-ui中的组件：container组件、layout组件 不知道的属性学会看文档！
:default-active="$route.path" 配默认高亮菜单项
$route.path 字符串，等于当前路由对象的路径，如“/home/news
$router是全局的路由对象，vue-router 的实例，提供addRoutes、back等方法，相当于一个路由的管理者角色。
$route是当前的路由对象，包含具体的路由名称、path、query 、params 等属性，其实就是routes（ new Router时声明的routes）里面的一条具体的路由。
router选项开启，代表着el-menu-ite标签里的index值就是点击跳转的路径，相当于平时的to。
$route.path与下面配置的index值相等的就会高亮
el-sub-menu多级菜单，里面内容其实是具名插槽
登录访问拦截
对于未登录用户，除了登录页其他页面都不让访问
全局前置守卫：拦截并重定向。详情看官方文档
用户基本信息获取&渲染
api/user.js中封装请求；stores/modules/user.js中定义方法调用请求接口，暴露出去；Layout.vue页面onMounted函数里一进页面就调用请求服务的那个方法；请求回来的数据渲染到页面
退出功能
下拉菜单，element-ui中有Dropdown
跳转 router.push(`/user/${command}`) 注：用反引号
如果退出，加个确认框element-ui中有直接用，确认的话跳转到登录页 router.push(‘/login’),清除本地数据（token+user信息）,这两个数据在stores/modules/user.js中配置更改这两个数据的方法，回到Layout.vue页面调用方法userStore.removeToken（）、userStore.setUser（）。
文章分类页ArticlChannel
基本架子-PageContainer封装
官网el-card:头部，内容部分。用上插槽
components/PageContainer里写组件，可以复用头部和内容部分这样的页面结构。里面不写死，放入默认插槽定制内容，具名插槽定制按钮，PageContainer.vue页面配置插槽。
文章分类渲染&loading处理
获取文章分类信息，封装到api/article.js发请求。回到页面调用，返回数据渲染出来。
loading也在element-ui里面有，可直接套用
声明变量loading：false，在发请求前true，后false
当返回空数组，表格插槽el-empty直接用。
文章分类添加编辑 [element-plus弹层]复用
1添加编辑可共用一个弹层。准备弹层 Dialog对话框 组件在element-ui里面有
准备一个值为false的变量DialogVisible，意为弹框不显示，绑定到弹层最外部，点击事件DialogVisible变true显示弹层
2封装弹层组件ChannelEdit，组件对外暴露一个方法open，基于open传来的参数，区分添加还是编辑，添加参数为{}，编辑参数为{id:xx,...} open是异步
3组件内部向外暴露方法defineExpose（{open}）传参row是自动获取的，能拿到当前行的id
利用作用域插槽row可以获取当前行的数据，row相当于v-for的item，row是element-plus内部遍历articleList所得的item每一项。
4通过ref绑定获取弹层组件元素
5点击调用方法显示弹层
6准备弹层里面的表单——ref对象，以及校验规则
7编辑需要回显，表单数据初始化。row赋值给表单对象的值。
8基于传过来的表单数据formModel.id进行标题控制，有id的是编辑。三目运算符
9绑定点击确认事件，封装请求，传回变的数据。重新渲染
文章分类删除
api/article.js封装接口
页面中绑定点击删除事件，参数为row，添加确认框 ，调用删除接口，提示删除成功，重新渲染
这篇关于（Vue3）大事记管理系统 首页 文章分类页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
