.

src/App.vue

@@ -1,16 +1,15 @@
 <template>
     <div class="container">
         <div class="header">
-            <el-col :span="5" class="header_item">
+            <el-col :span="4" class="header_item">
                 <img class="logo" src="./assets/logo.png">
             </el-col>
-            <el-col :span="14" class="header_item">
+            <el-col :span="16" class="header_item">
                 <el-menu class="menu"
-                         :default-active="$store.getters.getNav"
+                         :default-active="this.$route.path"
                          mode="horizontal"
-                         :router=true
-                         @select="handleMenu">
-                    <el-menu-item index="/">首页</el-menu-item>
+                         :router=true>
+                    <el-menu-item index="/"><span class="el-icon-menu"/>首页</el-menu-item>
                     <el-menu-item index="/things">物联</el-menu-item>
                     <el-menu-item index="/template">模板</el-menu-item>
                     <el-menu-item index="/now">实时</el-menu-item>
@@ -24,13 +23,10 @@
                     <el-menu-item index="/about">关于</el-menu-item>
                 </el-menu>
             </el-col>
-            <el-col :span="3" class="header_item">
+            <el-col :span="2" class="header_item">
                 <el-badge :value="12" :max="99" class="badge_item" type="primary">
                     <span class="span_small" @click="handleMessage">消息</span>
                 </el-badge>
-                <el-badge :value="12" :max="99" class="badge_item">
-                    <span class="span_small" @click="handleAlarm">报警</span>
-                </el-badge>
             </el-col>
             <el-col :span="2" class="header_item">
                 <el-dropdown class="avatar_item" trigger="click" @command="handleCommand">
@@ -147,6 +143,7 @@
 </style>
 
 <script>
+
     export default {
         data() {
             return {};
@@ -154,15 +151,9 @@
         created() {
         },
         methods: {
-            handleMenu(key, keyPath) {
-                console.log(key, keyPath);
-            },
             handleMessage() {
                 this.$message('click on message');
             },
-            handleAlarm() {
-                this.$message('click on alarm');
-            },
             handleCommand(command) {
                 this.$message('click on item ' + command);
             }

src/config/website.js

@@ -0,0 +1,7 @@
+/**
+ * 全局配置文件
+ */
+export default {
+    key: 'dc3',
+    nav: '/'
+}

src/router/router.js

@@ -1,8 +1,74 @@
+import Vue from 'vue'
 import VueRouter from 'vue-router'
-import PageRouter from './page/'
 import ViewsRouter from './views/'
 
-let router = new VueRouter({
+import Home from '../views/Home'
+import Things from '../views/Things'
+import Template from '../views/Template'
+import Now from '../views/Now'
+import History from '../views/History'
+import Alarm from '../views/Alarm'
+import Label from '../views/Label'
+import Picture from '../views/Picture'
+import Video from '../views/Video'
+import About from '../views/About'
+
+Vue.use(VueRouter)
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/things',
+        name: 'things',
+        component: Things
+    },
+    {
+        path: '/template',
+        name: 'template',
+        component: Template
+    },
+    {
+        path: '/now',
+        name: 'now',
+        component: Now
+    },
+    {
+        path: '/history',
+        name: 'history',
+        component: History
+    },
+    {
+        path: '/alarm',
+        name: 'alarm',
+        component: Alarm
+    },
+    {
+        path: '/label',
+        name: 'label',
+        component: Label
+    },
+    {
+        path: '/picture',
+        name: 'picture',
+        component: Picture
+    },
+    {
+        path: '/video',
+        name: 'video',
+        component: Video
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: About
+    }
+];
+
+const router = new VueRouter({
     scrollBehavior(to, from, savedPosition) {
         if (savedPosition) {
             return savedPosition
@@ -16,9 +82,9 @@ let router = new VueRouter({
             }
         }
     },
-    routes: []
+    routes: routes
 });
 
-router.addRoutes([...PageRouter, ...ViewsRouter]);
+router.addRoutes([...ViewsRouter]);
 
 export default router

src/router/views/index.js

@@ -0,0 +1,43 @@
+export default [
+    /*{
+        path: '/login',
+        name: '登录页',
+        component: () => import('@/page/login/index'),
+        meta: {
+            keepAlive: true,
+            isTab: false,
+            isAuth: false
+        }
+    },*/ {
+        path: '/404',
+        component: () => import('@/components/error/404'),
+        name: '404',
+        meta: {
+            keepAlive: true,
+            isTab: false,
+            isAuth: false
+        }
+
+    }, {
+        path: '/403',
+        component: () => import('@/components/error/403'),
+        name: '403',
+        meta: {
+            keepAlive: true,
+            isTab: false,
+            isAuth: false
+        }
+    }, {
+        path: '/500',
+        component: () => import('@/components/error/500'),
+        name: '500',
+        meta: {
+            keepAlive: true,
+            isTab: false,
+            isAuth: false
+        }
+    }, {
+        path: '*',
+        redirect: '/404'
+    }
+]

src/store/getters.js

@@ -0,0 +1,5 @@
+const getters = {
+    currentNav: state => state.common.currentNav
+};
+
+export default getters

src/store/modules/common.js

@@ -0,0 +1,20 @@
+import website from '../../config/website'
+import {getStore, setStore} from '../../util/store'
+
+const common = {
+
+    state: {
+        website: website,
+        currentNav: getStore({name: 'currentNav'}) || '/',
+    },
+    mutations: {
+        SET_CURRENT_PATH: (state, currentNav) => {
+            state.currentNav = currentNav;
+            setStore({
+                name: 'currentNav',
+                content: state.currentNav,
+            })
+        }
+    }
+};
+export default common

src/store/store.js

@@ -1,20 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import common from './modules/common'
+import getters from './getters'
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: {
-    nav: '/'
+const store = new Vuex.Store({
+    modules: {
+        common
     },
-  mutations: {
-    handleSelect(state, index) {
-      state.nav = index;
-    }
-  },
-  getters:{
-    getNav(state){
-      return state.nav;
-    }
-  }
-})
+    getters
+});
+
+export default store

src/util/store.js

@@ -0,0 +1,123 @@
+import {isNull} from './validate';
+import website from '../config/website'
+
+const keyName = website.key + '-';
+
+/**
+ * 存储 localStorage
+ * @param params
+ */
+export const setStore = (params = {}) => {
+    let {
+        name,
+        content,
+        type,
+    } = params;
+    name = keyName + name;
+    let obj = {
+        dataType: typeof (content),
+        content: content,
+        type: type,
+        datetime: new Date().getTime()
+    };
+    if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
+    else window.localStorage.setItem(name, JSON.stringify(obj));
+};
+
+/**
+ * 获取 localStorage
+ * @param params
+ */
+export const getStore = (params = {}) => {
+    let {
+        name,
+        debug
+    } = params;
+    name = keyName + name;
+    let obj = {},
+        content;
+    obj = window.sessionStorage.getItem(name);
+    if (isNull(obj)) obj = window.localStorage.getItem(name);
+    if (isNull(obj)) return;
+    try {
+        obj = JSON.parse(obj);
+    } catch {
+        return obj;
+    }
+    if (debug) {
+        return obj;
+    }
+    if (obj.dataType === 'string') {
+        content = obj.content;
+    } else if (obj.dataType === 'number') {
+        content = Number(obj.content);
+    } else if (obj.dataType === 'boolean') {
+        content = eval(obj.content);
+    } else if (obj.dataType === 'object') {
+        content = obj.content;
+    }
+    return content;
+};
+
+/**
+ * 删除 localStorage
+ * @param params
+ */
+export const removeStore = (params = {}) => {
+    let {
+        name,
+        type
+    } = params;
+    name = keyName + name;
+    if (type) {
+        window.sessionStorage.removeItem(name);
+    } else {
+        window.localStorage.removeItem(name);
+    }
+};
+
+/**
+ * 获取全部 localStorage
+ * @param params
+ */
+export const getAllStore = (params = {}) => {
+    let list = [];
+    let {
+        type
+    } = params;
+    if (type) {
+        for (let i = 0; i <= window.sessionStorage.length; i++) {
+            list.push({
+                name: window.sessionStorage.key(i),
+                content: getStore({
+                    name: window.sessionStorage.key(i),
+                    type: 'session'
+                })
+            })
+        }
+    } else {
+        for (let i = 0; i <= window.localStorage.length; i++) {
+            list.push({
+                name: window.localStorage.key(i),
+                content: getStore({
+                    name: window.localStorage.key(i),
+                })
+            })
+
+        }
+    }
+    return list;
+};
+
+/**
+ * 清空全部 localStorage
+ * @param params
+ */
+export const clearStore = (params = {}) => {
+    let {type} = params;
+    if (type) {
+        window.sessionStorage.clear();
+    } else {
+        window.localStorage.clear()
+    }
+};

src/views/Home.vue

@@ -1,6 +1,89 @@
 <template>
     <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
+        <base-card>
+            <p>
+                Welcome to Your Vue.js App
+            </p>
+        </base-card>
     </div>
 </template>