本文主要是介绍（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}`) 注：用反引号
这篇关于（Vue3）大事记管理系统 首页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
