点击菜单跳转到指定路由

src/components/Home.vue

@@ -13,7 +13,7 @@
 
         <el-menu unique-opened :collapse="isCollapsed" :collapse-transition="false"
           background-color="#313743"
-          text-color="#fff" router
+          text-color="#fff" router :default-active="activeNav"
           active-text-color="#3497FF">
           <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
             <!-- 一级菜单模板 -->
@@ -24,11 +24,15 @@
               <span>{{item.authName}}</span>
             </template>
             <!--二级菜单-->
-            <el-menu-item :index="'/'+subitem.path" v-for="subitem in item.children " :key="subitem.id + ''">
-              <!--图标-->
-              <i class="el-icon-menu"></i>
-              <!--文本-->
-              <span>{{subitem.authName}}</span>
+            <el-menu-item :index="'/'+subitem.path" v-for="subitem in item.children " :key="subitem.id + ''"
+                          @click="saveNavActive('/'+subitem.path)"
+            >
+              <template slot="title">
+                <!--图标-->
+                <i class="el-icon-menu"></i>
+                <!--文本-->
+                <span>{{subitem.authName}}</span>
+              </template>
             </el-menu-item>
           </el-submenu>
         </el-menu>
@@ -58,7 +62,8 @@ export default {
         145: 'iconfont icon-baobiao'
       },
       isCollapsed: false,
-      width: '200px'
+      width: '200px',
+      activeNav: sessionStorage.getItem('menuActive')
     }
   },
   methods: {
@@ -69,6 +74,9 @@ export default {
       sessionStorage.clear()
       this.$router.push('/login')
     },
+    saveNavActive (nav) {
+      sessionStorage.setItem('menuActive', nav)
+    },
     async getMenuList () {
       const { data: res } = await this.$http.get('menus')
       if (res.meta.status !== 200) {

src/components/users/users.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="users">
+      <h1>user lists</h1>
+        <pre v-text="$attrs"/>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+  }
+}
+</script>
+<style lang="less" scoped></style>

src/router/router.js

@@ -3,26 +3,20 @@ import VueRouter from 'vue-router'
 import Login from '../components/Login'
 import Home from '../components/Home'
 import welcome from '../components/welcome'
+import users from '../components/users/users'
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/', redirect: '/login'
-  },
-  {
-    path: '/login',
-    component: Login
-  },
+  { path: '/', redirect: '/login' },
+  { path: '/login', component: Login },
   {
     path: '/home',
     component: Home,
     redirect: '/welcome',
     children: [
-      {
-        path: '/welcome',
-        component: welcome
-      }
+      { path: '/welcome', component: welcome },
+      { path: '/users', component: users }
     ]
   }
 ]