配置导航栏激活效果

sso-manage-console-web/package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "bootstrap": "3",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

sso-manage-console-web/src/components/app/AppList.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}123</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppHome',
+  data () {
+    return {
+      msg: 'AppList'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

sso-manage-console-web/src/components/common/NavBar.vue

@@ -6,13 +6,14 @@
       </div>
       <div class="collapse navbar-collapse">
         <ul class="x-menu">
-          <li class="nav-current"><router-link to="/">首页</router-link></li>
-          <li><router-link to="/app">应用管理</router-link></li>
-          <li><router-link to="/user_space">企业管理</router-link></li>
-          <li><router-link to="/user">用户管理</router-link></li>
-          <li><router-link to="/admin">更换管理员</router-link></li>
-          <li><router-link to="/asset">资源管理</router-link></li>
-          <li><router-link to="/settings">设置</router-link></li>
+          <!-- 激活<a>标签外层元素 -->
+          <router-link tag="li" active-class="nav-current" to="/" exact><a>首页</a></router-link>
+          <router-link tag="li" active-class="nav-current" to="/app"><a>应用管理</a></router-link>
+          <router-link tag="li" active-class="nav-current" to="/user_space"><a>企业管理</a></router-link>
+          <router-link tag="li" active-class="nav-current" to="/user"><a>用户管理</a></router-link>
+          <router-link tag="li" active-class="nav-current" to="/admin"><a>更换管理员</a></router-link>
+          <router-link tag="li" active-class="nav-current" to="/asset"><a>资源管理</a></router-link>
+          <router-link tag="li" active-class="nav-current" to="/settings"><a>设置</a></router-link>
         </ul>
       </div>
     </div>
@@ -21,7 +22,12 @@
 
 <script>
   export default {
-    name: 'NavBar'
+    name: 'NavBar',
+    computed: {
+      nav_current () {
+        console.log(this.$store)
+      }
+    }
   }
 </script>
 

sso-manage-console-web/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import AppHome from '@/components/app/AppHome'
+import AppList from '@/components/app/AppList'
 import UserSpaceHome from '@/components/userspace/UserSpaceHome'
 import UserHome from '@/components/user/UserHome'
 import ChangeAdmin from '@/components/admin/ChangeAdmin'
@@ -21,6 +22,16 @@ export default new Router({
       path: '/app',
       component: AppHome
     },
+    {
+      // TODO 测试路由
+      path: '/app/list',
+      component: AppList
+    },
+    {
+      // TODO 测试路由
+      path: '/app_list',
+      component: AppList
+    },
     {
       path: '/user_space',
       component: UserSpaceHome

sso-manage-console-web/src/store/index.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)

sso-manage-console-web/yarn.lock

@@ -5478,6 +5478,10 @@ vue@^2.5.2:
   version "2.5.13"
   resolved "http://registry.npm.taobao.org/vue/download/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"
 
+vuex@^3.0.1:
+  version "3.0.1"
+  resolved "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
+
 watchpack@^1.4.0:
   version "1.4.0"
   resolved "http://registry.npm.taobao.org/watchpack/download/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"