持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
今天写了Vue项目中的登录跳转之后，通过组件内的路由守卫来判断是否可以进行跳转，下面先给大家介绍一下整个实现过程，然后再给大家上代码做分析。
- 实现思路：
- 点击登录按钮之后就进行了跳转，跳转到后台系统的详情页面。
- 在进入路由组件之前，要先利用组件内的beforeRouteEnter钩子，判断sessionStorage中的token是否等于字符串'ok'，这个token是从服务器请求回来的数据存储到了sessionStorage中。如果相等的话，就执行next（），可以进入该路由组件
- 如果不相等则返回登陆界面，也是利用next()方法进行重定向。
beforeRouteEnter钩子接收三个参数：
- to:下一个要进入的路由组件
- from：即将要离开的路由组件
- next：决定是否可以进入该路由组件 注意：一定要使用next（）方法，否则的话无论怎样点击导航按钮，都无法进入路由组件。 进入路由组件之后，在created生命周期中，发送了axios请求，向服务器请求左边导航的数据，然后显示在左侧，这里利用了element-ui的menu组件，因为导航里有的一级菜单是没有二级菜单的，所以遍历生成的时候需要用v-if和 v-else做判断，下面给大家上代码看一下
<el-submenu/>代表的是有二级菜单项的组件，<el-menu-item/>代表的是没有二级菜单项的，所以在他们的外面包裹了一个div，对这个div进行遍历，然后渲染<el-submenu/>做v-if判断，是否有item.children_m属性，有的话，就代表它有二级菜单项，然后就使用该组件，斗则就使用<el-menu-item/>组件。- 点击刚刚渲染出来的侧导航，会在当前路由组件的content部分，渲染不同的组件，所以需要绑定事件。
<el-menu>组件有一个@select事件，该事件接收两个参数，第一个是index，就是我们在遍历生成左侧导航的时候index属性里存储的值，然后判断index的值具体是什么，然后根据不同的index，进行声明式导航的路由跳转，给大家上代码看一下：
大家对于我的想法和代码有什么想法，欢迎小伙伴们评论点出哦！！！
