Element UI + NodeJs(Express)全栈开发后台管理界面

本篇文章参考的是B站的up主前端之巅的Element UI + NodeJs(Express)全栈开发后台管理界面视频。传送门：www.bilibili.com/video/BV1t4…

大佬在视频中讲解的很清晰。我在这里记录的是自己在做的过程中遇到的几个问题： 1：在编辑文章的时候，如果直接点击导航栏，就无法正确显示。原因是：设置的路由配置如下:

const routes = [
  {
    path: "/",
    name: "Home",
    redirect: "/1-1",
  },
  {
    path: "/1-1",
    name: "ArtList",
    component: ArtList,
  },
  {
    path: "/1-2",
    name: "CreateArt",
    component: CreateArt,
  },
  {
    path: "/:id/editArt",
    name: "EditArt",
    component: EditArt,
  },
];

编辑文章，对应的path是path: "/:id/editArt"，在点击导航栏的时候，path就变为了path: "/1-2"这种。解决办法：在编辑页面的组件中使用了路由守卫beforeRouteLeave，去判断from的path。如果是要从编辑的页面跳转到其他页面，要修改to的path。但是在做的过程中又遇到了问题，设置了路由守卫之后，一直死循环。查询资料得知，原因：vue-router使用next()跳转到指定路径时会无限循环。可以参考这篇文章：vue-router使用next()跳转到指定路径时会无限循环。

2：使用element-ui的导航栏，只有在点击的时候，才会显示选中的样式。在页面中点击按钮，跳转到相应的页面，对应的导航栏是没有选中的样式。解决办法：定义了一个计算属性，通过路由去获取当前的页面对应的是那个导航。给el-menu的default-active添加一个计算属性activeIdex，这个属性就是从当前路由中获取到的。

         <template>
             <el-menu :default-openeds="['1']" router :default-active="activeIndex">
             你的html内容
             </el-menu>
        </template>
        <script>
            computed:{
                activeIndex(){
                return this.$route.path.replace('/','')}
         },
        </script>

具体可以参考这篇文章：vue和element框架搭配实现导航条跳转，点击按钮跳转页面导航条也跟着变换。