diff --git a/README.md b/README.md
index 63e11950..f0f4514a 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@
 - [ES6入门 阮一峰](http://es6.ruanyifeng.com/)
 - [Vue入门项目系列](/~https://github.com/uncleLian/vue2-echo)
 
-<img src="http://poci6sbqi.bkt.clouddn.com/vue-blog.jpg" width="900px" style="max-width: 100%;"/>
+<img src="/~https://github.com/uncleLian/vue-blog/raw/gh-pages/screenshots/dashboard.png" width="900px" style="max-width: 100%;"/>
 
 ## 功能
 功能持续迭代中，欢迎 [pr](/~https://github.com/uncleLian/vue-blog/pulls) 和 [issue](/~https://github.com/uncleLian/vue-blog/issues)
@@ -44,6 +44,7 @@
         - stage
     - 动态侧边栏
     - 动态面包屑
+    - 导航标签
     - 错误处理
         - 401
         - 404
@@ -117,7 +118,7 @@ npm run build:report
 
 如果觉得这个项目帮助到了你，你可以请作者喝杯饮料表示支持 :green_heart:
 
-![image](http://poci6sbqi.bkt.clouddn.com/donate.jpg)
+![image](/~https://github.com/uncleLian/vue-blog/raw/gh-pages/screenshots/donate.jpg)
 
 ## 交流
 欢迎热爱学习、忠于分享的朋友一起来交流
diff --git a/src/App.vue b/src/App.vue
index 92e2b25d..2681a294 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <app-view />
+        <app-pageView />
         <vue-progress-bar />
     </div>
 </template>
diff --git a/src/api/login.js b/src/api/login.js
index 883b951f..46387678 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -7,6 +7,6 @@ export function getLogin(form) {
 }
 // 用户信息
 export function getUser(token) {
-    let res = request('/api/user', 'GET', token)
+    let res = request('/api/user', 'POST', token)
     return res
 }
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
index 78624465..f5c5ed1a 100644
--- a/src/components/UserSelect/index.vue
+++ b/src/components/UserSelect/index.vue
@@ -17,9 +17,9 @@
 import { mapState } from 'vuex'
 export default {
     computed: {
-        ...mapState([
-            'user'
-        ]),
+        ...mapState('login', {
+            user: state => state.user
+        }),
         version() {
             return 'v' + require('../../../package.json').version
         }
@@ -27,8 +27,9 @@ export default {
     methods: {
         onSelected(val) {
             if (val === 'exit') {
-                this.$store.commit('SET_LOGOUT')
-                this.$router.push('/login')
+                this.$store.dispatch('login/logout').then(() => {
+                    this.$router.push('/login')
+                })
             }
         }
     }
diff --git a/src/components/index.js b/src/components/index.js
index 93847e40..19c878c5 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import view from '@/layout/view'
+import PageView from '@/layout/PageView'
 
 const components = {
-    'app-view': view
+    'app-pageView': PageView
 }
 
 // 注册全局组件
diff --git a/src/language/en.js b/src/language/en.js
index 9ee366e0..584d4ce0 100644
--- a/src/language/en.js
+++ b/src/language/en.js
@@ -1,7 +1,7 @@
 export default {
     route: {
         index: 'Index',
-        home: 'Home',
+        dashboard: 'Dashboard',
         documents: 'Documents',
         guide: 'Guide',
         permission: 'Permission',
@@ -137,5 +137,11 @@ export default {
         passwordMsg: 'Please enter password',
         successMsg: 'Login Success',
         errorMsg: 'Login Error'
+    },
+    tagsView: {
+        refresh: 'Refresh',
+        close: 'Close',
+        closeOthers: 'Close Others',
+        closeAll: 'Close All'
     }
 }
diff --git a/src/language/zh.js b/src/language/zh.js
index e66b90a4..088bb48f 100644
--- a/src/language/zh.js
+++ b/src/language/zh.js
@@ -1,7 +1,7 @@
 export default {
     route: {
         index: '首页',
-        home: '主页',
+        dashboard: '主页',
         documents: '文档',
         guide: '引导页',
         permission: '权限测试',
@@ -137,5 +137,11 @@ export default {
         passwordMsg: '请输入密码',
         successMsg: '登录成功',
         errorMsg: '账号密码错误'
+    },
+    tagsView: {
+        refresh: '刷新',
+        close: '关闭',
+        closeOthers: '关闭其它',
+        closeAll: '关闭所有'
     }
 }
diff --git a/src/layout/NavBar/index.vue b/src/layout/NavBar/index.vue
new file mode 100644
index 00000000..e0b95889
--- /dev/null
+++ b/src/layout/NavBar/index.vue
@@ -0,0 +1,75 @@
+<template>
+    <div id="navBar">
+        <div class="navBar-left">
+            <!-- 侧边栏伸缩按钮 -->
+            <Cola class="left-item ishover" />
+            <!-- 面包屑 -->
+            <breadcrumb class="left-item" />
+        </div>
+        <div class="navBar-right">
+            <!-- 错误日志 -->
+            <error-log class="right-item ishover" />
+            <!-- 全屏 -->
+            <screenfull class="right-item ishover" />
+            <!-- 切换语言 -->
+            <language-select class="right-item ishover" />
+            <!-- 切换主题 -->
+            <theme-picker class="right-item ishover" />
+            <!-- 用户选项 -->
+            <user-select class="right-item ishover" />
+        </div>
+    </div>
+</template>
+<script>
+import Cola from '@/components/Cola'
+import Breadcrumb from '@/components/Breadcrumb'
+import UserSelect from '@/components/UserSelect'
+import ErrorLog from '@/components/ErrorLog'
+import LanguageSelect from '@/components/LanguageSelect'
+import ThemePicker from '@/components/ThemePicker'
+import Screenfull from '@/components/Screenfull'
+export default {
+    components: {
+        Cola,
+        Breadcrumb,
+        UserSelect,
+        ErrorLog,
+        LanguageSelect,
+        ThemePicker,
+        Screenfull
+    }
+}
+</script>
+<style lang='stylus' scoped>
+#navBar {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 1px 2px rgba(0, 21, 41, 0.08);
+    .navBar-left {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+    .navBar-right {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        margin-right: 30px;
+    }
+    .left-item, .right-item {
+        flex-center();
+        height: 100%;
+        font-size: 18px;
+        padding: 0 10px;
+        cursor: pointer;
+        >>> .item-container {
+            flex-center();
+            height: 100%;
+        }
+    }
+}
+</style>
diff --git a/src/layout/view.vue b/src/layout/PageView/index.vue
similarity index 100%
rename from src/layout/view.vue
rename to src/layout/PageView/index.vue
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
index d7be2dc2..d43d3b1e 100755
--- a/src/layout/Sidebar/index.vue
+++ b/src/layout/Sidebar/index.vue
@@ -11,7 +11,6 @@
 </template>
 <script>
 import sideItem from './sideItem'
-import { sideRoutes } from '@/router'
 export default {
     components: { sideItem },
     data() {
@@ -21,20 +20,24 @@ export default {
         }
     },
     computed: {
+        sideRoutes() {
+            return this.$store.state.routes.sideRoutes[0].children
+        },
         isCollapse() {
             return !this.$store.state.sidebarStatus
         },
         minWidth() {
-            return this.isCollapse ? '36px' : this.$style.menuWidth
+            return this.isCollapse ? this.$style.menuIconWidth : this.$style.menuWidth
         }
     },
     created() {
-        this.filterRoutes = this.handleRoutes(sideRoutes)
+        this.filterRoutes = this.handleRoutes(this.sideRoutes)
     },
     methods: {
         // 递归过滤路由
         handleRoutes(Arr) {
             const Routes = Arr.filter(route => {
+                // 侧边栏路由强制写name，不然会导致很多问题（缓存、跳转等问题）
                 if (route.name) {
                     if (route.meta) {
                         if (route.meta.hidden) {
@@ -50,6 +53,7 @@ export default {
                     }
                     return true
                 } else {
+                    console.warn(`路由【${route.path}】：缺少name属性，存在bug隐患`)
                     return false
                 }
             })
@@ -62,7 +66,8 @@ export default {
 :export {
     menuBg: #304156;
     menuText: #f5f5f5;
-    menuWidth: 180px;
+    menuWidth: 210px;
+    menuIconWidth: 36px;
 }
 </style>
 <style lang="stylus">
@@ -79,8 +84,8 @@ export default {
         user-select: none;
         transition: width 0.28s;
         transform: translateZ(0); // 防止抖动
-        .scrollbar-wrapper {
-            overflow-x: hidden !important;
+        .el-scrollbar__bar.is-horizontal {
+            display: none;
         }
         .el-menu {
             width: 100%;
diff --git a/src/layout/Sidebar/sideLink.vue b/src/layout/Sidebar/sideLink.vue
index 5cdae54d..fa365d8a 100755
--- a/src/layout/Sidebar/sideLink.vue
+++ b/src/layout/Sidebar/sideLink.vue
@@ -1,4 +1,5 @@
 <script>
+import { isExternal } from '@/utils/validate'
 export default {
     name: 'sideLink',
     functional: true,
@@ -10,8 +11,7 @@ export default {
     render(h, context) {
         const { to } = context.props
         const vnodes = []
-        const isExternal = /^(https?:|mailto:|tel:)/.test(to.path)
-        if (isExternal) {
+        if (isExternal(to.path)) {
             vnodes.push(<a href={to.path} target='_blank'>{context.children}</a>)
         } else {
             vnodes.push(<router-link to={{ 'name': to.name }}>{context.children}</router-link>)
diff --git a/src/layout/TagsView/index.vue b/src/layout/TagsView/index.vue
new file mode 100644
index 00000000..93a1177f
--- /dev/null
+++ b/src/layout/TagsView/index.vue
@@ -0,0 +1,208 @@
+<template>
+    <div class="tag-view-container">
+        <scroll-pane ref="scrollPane">
+            <div id="tags-view">
+                <router-link class="tags-view-item" v-for="tag in tagsViewList" :key="tag.path" ref="tags" :to="{ 'path': tag.path, 'query': tag.query, 'fullPath': tag.fullPath }" :class="isTagActive(tag)? 'active' : ''" @contextmenu.prevent.native="openMenu(tag,$event)">
+                    {{tag.meta.title? translationRouteTitle(tag.meta.title) : translationRouteTitle(tag.name)}}
+                    <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeTag(tag)" />
+                </router-link>
+            </div>
+        </scroll-pane>
+        <ul v-show="menuVisible" :style="menuStyle" class="contextmenu">
+            <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
+            <li v-if="!(selectedTag.meta && selectedTag.meta.affix)" @click="closeTag(selectedTag)">{{$t('tagsView.close') }}</li>
+            <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
+            <li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
+        </ul>
+    </div>
+</template>
+<script>
+import scrollPane from './scrollPane'
+import { translationRouteTitle } from '@/utils/i18n.js'
+export default {
+    components: { scrollPane },
+    data() {
+        return {
+            selectedTag: '',
+            menuStyle: '',
+            menuVisible: false
+        }
+    },
+    computed: {
+        tagsViewList() {
+            return this.$store.state.tagsView.tagsView
+        }
+    },
+    watch: {
+        $route() {
+            this.addTag()
+            this.scrollToCurrenTag()
+        },
+        menuVisible(value) {
+            if (value) {
+                document.body.addEventListener('click', this.closeMenu)
+            } else {
+                document.body.removeEventListener('click', this.closeMenu)
+            }
+        }
+    },
+    mounted() {
+        this.$store.dispatch('tagsView/initTagsView')
+        this.addTag()
+    },
+    methods: {
+        translationRouteTitle,
+        // 打开右键菜单
+        openMenu(tag, e) {
+            let left = 0
+            let top = e.pageY
+            const menuMinWidth = 105
+            const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+            const offsetWidth = this.$el.offsetWidth // container width
+            const maxLeft = offsetWidth - menuMinWidth // left boundary
+            const menuLeft = e.pageX - offsetLeft + 15 // 15: margin right
+
+            if (menuLeft > maxLeft) {
+                left = maxLeft
+            } else {
+                left = menuLeft
+            }
+            this.menuStyle = {
+                'left': left + 'px',
+                'top': top + 'px'
+            }
+            this.menuVisible = true
+            this.selectedTag = tag
+        },
+        // 关闭右键菜单
+        closeMenu() {
+            this.menuVisible = false
+        },
+        addTag() {
+            this.$store.commit('tagsView/ADD_TAGS_VIEW', this.$route)
+        },
+        closeTag(tag) {
+            this.$store.dispatch('tagsView/closeTagsView', tag).then(tags => {
+                if (this.isTagActive(tag)) {
+                    this.toLastTag(tags)
+                }
+            })
+        },
+        refreshSelectedTag() {
+            this.$router.replace({ path: '/index/redirect' + this.selectedTag.fullPath })
+        },
+        closeOthersTags() {
+            this.$router.push(this.selectedTag)
+            this.$store.commit('tagsView/CLOSE_OTHER_TAGS_VIEW', this.selectedTag)
+        },
+        closeAllTags() {
+            this.$store.dispatch('tagsView/clearTagsView').then(tags => {
+                this.toLastTag(tags)
+            })
+        },
+        isTagActive(tag) {
+            return tag.path === this.$route.path
+        },
+        toLastTag(tagsList) {
+            const lastTag = this.tagsViewList.slice(-1)[0]
+            if (lastTag) {
+                this.$router.push(lastTag)
+            } else {
+                this.$router.push('/')
+            }
+        },
+        scrollToCurrenTag() {
+            const tags = this.$refs.tags
+            this.$nextTick(() => {
+                for (const tag of tags) {
+                    if (tag.to.path === this.$route.path) {
+                        this.$refs.scrollPane.scrollTo(tag)
+                        break
+                    }
+                }
+            })
+        }
+    }
+}
+</script>
+<style lang='stylus'>
+.tag-view-container {
+    #tags-view {
+        display: flex;
+        align-items: center;
+        padding: 4px 0 3px;
+        .tags-view-item {
+            position: relative;
+            height: 26px;
+            line-height: 26px;
+            color: #495060;
+            font-size: 12px;
+            text-align: center;
+            white-space: nowrap;
+            cursor: pointer;
+            user-select: none;
+            padding: 0 8px;
+            margin-left: 5px;
+            border: 1px solid #d8dce5;
+            background: #fff;
+            border-radius: 2px;
+            &.active {
+                color: #fff;
+                background: $appColor;
+                border: $appColor;
+                &:before {
+                    content: '';
+                    background: #fff;
+                    display: inline-block;
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    position: relative;
+                    margin-right: 2px;
+                }
+            }
+            &:first-of-type {
+                margin-left: 15px;
+            }
+            .el-icon-close {
+                width: 16px;
+                height: 16px;
+                text-align: center;
+                vertical-align: 2px;
+                border-radius: 50%;
+                transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+                &:before {
+                    display: inline-block;
+                    transform: scale(0.6);
+                    vertical-align: -3px;
+                }
+                &:hover {
+                    background-color: #b4bccc;
+                }
+            }
+        }
+    }
+    .contextmenu {
+        position: absolute;
+        z-index: 111;
+        color: #333;
+        font-size: 12px;
+        font-weight: 400;
+        user-select: none;
+        padding: 5px 0;
+        margin: 0;
+        list-style: none;
+        background: #fff;
+        border-radius: 4px;
+        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+        li {
+            padding: 7px 16px;
+            cursor: pointer;
+            &:hover {
+                color: $appColor;
+                background: rgba($appColorRGB, 0.1);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/layout/TagsView/scrollPane.vue b/src/layout/TagsView/scrollPane.vue
new file mode 100644
index 00000000..96e88c88
--- /dev/null
+++ b/src/layout/TagsView/scrollPane.vue
@@ -0,0 +1,56 @@
+<template>
+    <el-scrollbar ref="scrollContainer" :native="true" style="margin-right:5px">
+        <slot />
+    </el-scrollbar>
+</template>
+<script>
+const tagAndTagSpacing = 5
+export default {
+    computed: {
+        scrollWrap() {
+            return this.$refs.scrollContainer.$refs.wrap
+        }
+    },
+    methods: {
+        // 解决两侧tag边距问题
+        scrollTo(currentTag) {
+            const $container = this.$refs.scrollContainer.$el
+            const $containerWidth = $container.offsetWidth
+            const $scrollWrapper = this.scrollWrap
+            const tagList = this.$parent.$refs.tags
+
+            let firstTag = null
+            let lastTag = null
+
+            // find first tag and last tag
+            if (tagList.length > 0) {
+                firstTag = tagList[0]
+                lastTag = tagList[tagList.length - 1]
+            }
+
+            if (firstTag === currentTag) {
+                $scrollWrapper.scrollLeft = 0
+            } else if (lastTag === currentTag) {
+                $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+            } else {
+                // find preTag and nextTag
+                const currentIndex = tagList.findIndex(item => item === currentTag)
+                const prevTag = tagList[currentIndex - 1]
+                const nextTag = tagList[currentIndex + 1]
+
+                // the tag's offsetLeft after of nextTag
+                const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+                // the tag's offsetLeft before of prevTag
+                const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+                if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+                    $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+                } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+                    $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+                }
+            }
+        }
+    }
+}
+</script>
diff --git a/src/layout/header.vue b/src/layout/header.vue
deleted file mode 100755
index 4d30c7ce..00000000
--- a/src/layout/header.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <el-header class="app-header" height="50px">
-        <div class="container">
-            <div class="header-left">
-                <!-- 侧边栏伸缩按钮 -->
-                <Cola class="left-item ishover" />
-                <!-- 面包屑 -->
-                <breadcrumb class="left-item" />
-            </div>
-            <div class="header-right">
-                <!-- 错误日志 -->
-                <error-log class="right-item ishover" />
-                <!-- 全屏 -->
-                <screenfull class="right-item ishover" />
-                <!-- 切换语言 -->
-                <language-select class="right-item ishover" />
-                <!-- 切换主题 -->
-                <theme-picker class="right-item ishover" />
-                <!-- 用户选项 -->
-                <user-select class="right-item ishover" />
-            </div>
-        </div>
-    </el-header>
-</template>
-<script>
-import Cola from '@/components/Cola'
-import Breadcrumb from '@/components/Breadcrumb'
-import UserSelect from '@/components/UserSelect'
-import ErrorLog from '@/components/ErrorLog'
-import LanguageSelect from '@/components/LanguageSelect'
-import ThemePicker from '@/components/ThemePicker'
-import Screenfull from '@/components/Screenfull'
-export default {
-    components: {
-        Cola,
-        Breadcrumb,
-        UserSelect,
-        ErrorLog,
-        LanguageSelect,
-        ThemePicker,
-        Screenfull
-    }
-}
-</script>
-<style lang='stylus' scoped>
-.app-header {
-    position: relative;
-    width: 100%;
-    background-color: #fff;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-    padding: 0;
-    z-index: 1;
-    .container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .left-item, .right-item {
-            flex-center();
-            height: 100%;
-            font-size: 18px;
-            padding: 0 10px;
-            cursor: pointer;
-            >>> .item-container {
-                flex-center();
-                height: 100%;
-            }
-        }
-        .header-left {
-            display: flex;
-            align-items: center;
-            height: 100%;
-        }
-        .header-right {
-            display: flex;
-            align-items: center;
-            height: 100%;
-            margin-right: 30px;
-        }
-    }
-}
-</style>
diff --git a/src/mock/index.js b/src/mock/index.js
index c82484e3..31d6fd21 100755
--- a/src/mock/index.js
+++ b/src/mock/index.js
@@ -12,7 +12,7 @@ Mock.mock(base_mock_url + '/api/user', {
     data: {
         nickname: 'admin',
         headimgurl: 'http://poci6sbqi.bkt.clouddn.com/avatar.jpg',
-        role: 'admin'
+        roles: 'admin'
     }
 })
 Mock.mock(base_mock_url + '/api/list', {
diff --git a/src/pages/index/children/home/components/author.vue b/src/pages/index/children/dashboard/components/author.vue
similarity index 100%
rename from src/pages/index/children/home/components/author.vue
rename to src/pages/index/children/dashboard/components/author.vue
diff --git a/src/pages/index/children/home/components/banner.vue b/src/pages/index/children/dashboard/components/banner.vue
similarity index 100%
rename from src/pages/index/children/home/components/banner.vue
rename to src/pages/index/children/dashboard/components/banner.vue
diff --git a/src/pages/index/children/home/components/card.vue b/src/pages/index/children/dashboard/components/card.vue
similarity index 100%
rename from src/pages/index/children/home/components/card.vue
rename to src/pages/index/children/dashboard/components/card.vue
diff --git a/src/pages/index/children/home/components/table.vue b/src/pages/index/children/dashboard/components/table.vue
similarity index 100%
rename from src/pages/index/children/home/components/table.vue
rename to src/pages/index/children/dashboard/components/table.vue
diff --git a/src/pages/index/children/home/components/todo.vue b/src/pages/index/children/dashboard/components/todo.vue
similarity index 100%
rename from src/pages/index/children/home/components/todo.vue
rename to src/pages/index/children/dashboard/components/todo.vue
diff --git a/src/pages/index/children/home/home.vue b/src/pages/index/children/dashboard/index.vue
similarity index 93%
rename from src/pages/index/children/home/home.vue
rename to src/pages/index/children/dashboard/index.vue
index 77b9d55e..bd0feba0 100644
--- a/src/pages/index/children/home/home.vue
+++ b/src/pages/index/children/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="home">
+    <div id="dashboard">
         <app-banner />
         <app-card />
         <el-row :gutter="12">
@@ -36,8 +36,8 @@ export default {
     }
 }
 </script>
-<style lang='stylus'>
-#home {
+<style lang='stylus' scoped>
+#dashboard {
     padding-top: 10px;
     padding-bottom: 20px;
     padding-right: 30px;
diff --git a/src/pages/index/children/permission/permission.vue b/src/pages/index/children/permission/permission.vue
index 9397afe6..1f4a215a 100644
--- a/src/pages/index/children/permission/permission.vue
+++ b/src/pages/index/children/permission/permission.vue
@@ -47,9 +47,9 @@ export default {
     watch: {
         permission(val) {
             if (val) {
-                this.$store.commit('SET_ROLE', 'visitor')
+                this.$store.commit('login/SET_ROLE', 'visitor')
             } else {
-                this.$store.commit('SET_ROLE', 'admin')
+                this.$store.commit('login/SET_ROLE', 'admin')
             }
             this.index++
         }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 1b7e30cc..6f414c08 100755
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,24 +1,29 @@
 <template>
     <div id="index">
         <el-container id="horContainer" direction="horizontal">
-            <app-menu />
+            <app-sidebar />
             <el-container id="verContainer" direction="vertical">
-                <app-header />
-                <el-main id="main">
-                    <app-view />
+                <el-header id="app-header" height="auto">
+                    <app-navbar />
+                    <app-tagsView />
+                </el-header>
+                <el-main id="app-main">
+                    <app-pageView />
                 </el-main>
             </el-container>
         </el-container>
     </div>
 </template>
 <script>
-import header from '@/layout/header'
-import sidebar from '@/layout/Sidebar'
+import Sidebar from '@/layout/Sidebar'
+import NavBar from '@/layout/NavBar'
+import TagsView from '@/layout/TagsView'
 export default {
     name: 'index',
     components: {
-        'app-header': header,
-        'app-menu': sidebar
+        'app-sidebar': Sidebar,
+        'app-navbar': NavBar,
+        'app-tagsView': TagsView
     }
 }
 </script>
@@ -35,7 +40,15 @@ export default {
         height: 100%;
         transition: width 0.28s;
     }
-    #main {
+    #app-header {
+        position: relative;
+        width: 100%;
+        padding: 0;
+        background-color: #fff;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+        z-index: 1000;
+    }
+    #app-main {
         position: relative;
         width: 100%;
         background: #fff;
diff --git a/src/pages/login/login.vue b/src/pages/login/login.vue
index 21adc3f0..881c5e72 100755
--- a/src/pages/login/login.vue
+++ b/src/pages/login/login.vue
@@ -36,8 +36,7 @@ export default {
             form: {
                 username: 'admin',
                 password: '123456'
-            },
-            pwdWatch: false
+            }
         }
     },
     methods: {
@@ -55,14 +54,13 @@ export default {
         login() {
             let successMsg = this.$t('login.successMsg')
             let errorMsg = this.$t('login.errorMsg')
-            this.$store.dispatch('GET_LOGIN_DATA', this.form).then((res) => {
+            this.$store.dispatch('login/getLoginToken', this.form).then((res) => {
                 this.$message.success({
                     message: successMsg,
                     duration: 2000
                 })
-                this.$route.query.redirect ? this.$router.push(this.$route.query.redirect) : this.$router.push('/')
-            }).catch((err) => {
-                console.log(err)
+                this.$route.query.redirect ? this.$router.push(this.$route.query.redirect) : this.$router.push('/index')
+            }).catch(() => {
                 this.$message.error(errorMsg)
             })
         }
@@ -71,7 +69,7 @@ export default {
 </script>
 <style lang='stylus'>
 $loginPrimary = #304352;
-$loginPrimaryRGB = 48,67,82;
+$loginPrimaryRGB = 48, 67, 82;
 $loginGrey = rgba($loginPrimaryRGB, 0.06);
 $loginDark = rgba($loginPrimaryRGB, 0.5);
 #login {
diff --git a/src/pages/other/redirect.vue b/src/pages/other/redirect.vue
new file mode 100644
index 00000000..dd01bb6d
--- /dev/null
+++ b/src/pages/other/redirect.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+    render: function (h) {
+        return h() // avoid warning message
+    },
+    beforeCreate() {
+        console.log(this.$route)
+        const { params, query } = this.$route
+        const { path } = params
+        this.$router.replace({ path: '/' + path, query })
+    }
+}
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 759e3b6a..9aa73f93 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,30 +2,32 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 // 视图组件
-const view = () => import('@/layout/view')
+const PageView = () => import('@/layout/PageView')
 
 Vue.use(Router)
 
-/* sideRoutes config
+/* Routes Config
 * @meta
 * icon: ''                      菜单图标（支持svg-icon、el-icon）
 * title: ''                     菜单标题
 * login: false                  是否需要登录
 * role: 'admin' || ['admin']    是否需要权限
-* keep: false                   是否需要缓存
+* keep: false                   是否需要缓存（需要name才能生效）
 * hidden: false                 是否显示在菜单
 * open: false                   是否展开菜单（有子菜单前提下）
 * redirectIndex: 0              重定向到第index位子菜单（有子菜单前提下）
+* affix: false                  是否常驻在tagView组件上（外链无效）
 */
 
-// 要在侧边栏渲染的路由
-export let sideRoutes = [
+// 异步路由
+export const asyncRoutes = [
     {
-        name: 'home',
-        path: 'home',
-        component: () => import('@/pages/index/children/home/home'),
+        name: 'dashboard',
+        path: 'dashboard',
+        component: () => import('@/pages/index/children/dashboard'),
         meta: {
-            icon: 'dashboard'
+            icon: 'dashboard',
+            affix: true
         }
     },
     {
@@ -63,7 +65,7 @@ export let sideRoutes = [
     {
         name: 'components',
         path: 'components',
-        component: view,
+        component: PageView,
         meta: {
             icon: 'component'
         },
@@ -80,7 +82,7 @@ export let sideRoutes = [
             {
                 name: 'dragDemo',
                 path: 'drag',
-                component: view,
+                component: PageView,
                 meta: {
                     icon: 'move'
                 },
@@ -171,7 +173,7 @@ export let sideRoutes = [
     {
         name: 'excel',
         path: 'excel',
-        component: view,
+        component: PageView,
         meta: {
             icon: 'excel'
         },
@@ -196,7 +198,7 @@ export let sideRoutes = [
     {
         name: 'zip',
         path: 'zip',
-        component: view,
+        component: PageView,
         meta: {
             icon: 'zip'
         },
@@ -211,7 +213,7 @@ export let sideRoutes = [
     {
         name: 'errorPage',
         path: 'errorPage',
-        component: view,
+        component: PageView,
         meta: {
             icon: '404'
         },
@@ -246,70 +248,38 @@ export let sideRoutes = [
     }
 ]
 
-const routes = setRedirect([
+// 本地路由
+export const localRoutes = [
     {
         path: '',
-        redirect: '/index'
+        redirect: '/login'
     },
     {
-        name: 'index',
-        path: '/index',
-        component: () => import('@/pages/index/index'),
-        meta: {
-            login: true
-        },
-        children: sideRoutes
-    },
-    {
-        name: 'login',
         path: '/login',
         component: () => import('@/pages/login/login')
     },
     {
-        name: 'page401',
         path: '/page401',
         component: () => import('@/pages/other/page401')
     },
     {
-        name: 'page404',
         path: '/page404',
         component: () => import('@/pages/other/page404')
-    },
-    {
-        path: '*',
-        redirect: '/page404'
     }
-])
+]
 
-export default new Router({
+const createRouter = () => new Router({
     // mode: 'history',
-    routes,
-    scrollBehavior(to, from, savedPosition) {
-        if (savedPosition) {
-            return savedPosition
-        } else {
-            return { x: 0, y: 0 }
-        }
-    }
+    routes: localRoutes,
+    scrollBehavior: () => ({ y: 0 })
 })
 
-// 自动设置路由的重定向（有子路由前提下）
-function setRedirect(routes, redirect = '') {
-    routes.forEach(route => {
-        if (route.children && route.children.length > 0) {
-            if (!route.redirect) {
-                let defaultRedirectRoute = route.children.filter(item => !item.meta || !item.meta.hidden)[0]
-                let redirectIndex = route.meta && route.meta.redirectIndex
-                if (redirectIndex) {
-                    defaultRedirectRoute = route.children[redirectIndex]
-                }
-                let redirectName = defaultRedirectRoute.name
-                route.redirect = `${redirect}/${route.name}/${redirectName}`
-            }
-            let index = route.redirect && route.redirect.lastIndexOf('/')
-            let fatherDir = route.redirect && route.redirect.substring(0, index)
-            route.children = setRedirect(route.children, fatherDir)
-        }
-    })
-    return routes
+const router = createRouter()
+
+// Detail see: /~https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+    const newRouter = createRouter()
+    router.matcher = newRouter.matcher // reset router
 }
+
+export default router
diff --git a/src/store/index.js b/src/store/index.js
index 6946a1ff..dc6f1029 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,16 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import cache from '@/utils/cache'
-import { getLogin, getUser } from '@/api/login'
-import { getList } from '@/api/list'
 import i18n from '@/language'
 import variables from '@/assets/css/index.styl'
+import { getList } from '@/api/list'
 
 Vue.use(Vuex)
 
 const state = {
     logs: [],
-    user: '',
     sidebarStatus: cache.getCookie('sidebarStatus') !== 'false',
     language: cache.getCookie('language') || 'zh',
     theme: variables.appColor
@@ -21,16 +19,6 @@ const mutations = {
     SET_LOGS(state, error) {
         state.logs.unshift(error)
     },
-    SET_USER(state, val) {
-        state.user = val
-    },
-    SET_ROLE(state, val) {
-        state.user.role = val
-    },
-    SET_LOGOUT(state) {
-        state.user = ''
-        cache.removeToken()
-    },
     SET_SIDEBAR_STATUS(state) {
         let status = !state.sidebarStatus
         state.sidebarStatus = status
@@ -46,45 +34,24 @@ const mutations = {
     }
 }
 const actions = {
-    // 获取登录数据
-    async GET_LOGIN_DATA({ commit }, params) {
-        return new Promise((resolve, reject) => {
-            getLogin(params).then(res => {
-                // console.log('login', res)
-                if (res && res.token) {
-                    cache.setToken(res.token)
-                    resolve(res)
-                } else {
-                    reject(new Error('nothing login data'))
-                }
-            }).catch(err => {
-                reject(err)
-            })
-        })
-    },
-    // 获取用户数据
-    async GET_USER_DATA({ commit }, token) {
-        return new Promise((resolve, reject) => {
-            getUser(token).then(res => {
-                // console.log('user', res)
-                if (res && res.code === 200 && res.data) {
-                    commit('SET_USER', res.data)
-                    resolve(res.data)
-                } else {
-                    reject(new Error('nothing user data'))
-                }
-            }).catch(err => {
-                reject(err)
-            })
-        })
-    },
     GET_LIST_DATA(state) {
         return getList()
     }
 }
+
+// 自动引入和注册modules下的文件
+const modulesFiles = require.context('./modules', false, /\.js$/)
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+    const value = modulesFiles(modulePath)
+    modules[moduleName] = value.default
+    return modules
+}, {})
+
 export default new Vuex.Store({
     state,
     getters,
     mutations,
-    actions
+    actions,
+    modules
 })
diff --git a/src/store/modules/login.js b/src/store/modules/login.js
new file mode 100644
index 00000000..8e80a0ac
--- /dev/null
+++ b/src/store/modules/login.js
@@ -0,0 +1,62 @@
+import { getLogin, getUser } from '@/api/login'
+import { resetRouter } from '@/router'
+import cache from '@/utils/cache'
+
+export default {
+    namespaced: true,
+    state: {
+        user: ''
+    },
+    mutations: {
+        SET_USER(state, val) {
+            state.user = val
+        },
+        // 只做权限测试页使用
+        SET_ROLE(state, val) {
+            state.user.role = val
+        }
+    },
+    actions: {
+        // 获取登录数据
+        async getLoginToken({ commit }, params) {
+            return new Promise((resolve, reject) => {
+                getLogin(params).then(res => {
+                    // console.log('login', res)
+                    if (res && res.token) {
+                        cache.setToken(res.token)
+                        resolve(res)
+                    } else {
+                        reject(new Error('nothing login data'))
+                    }
+                }).catch(err => {
+                    reject(err)
+                })
+            })
+        },
+        // 获取用户数据
+        async getUserData({ commit }) {
+            return new Promise((resolve, reject) => {
+                let token = cache.getToken()
+                getUser(token).then(res => {
+                    // console.log('user', res)
+                    if (res.data) {
+                        commit('SET_USER', res.data)
+                        resolve(res.data)
+                    } else {
+                        reject(new Error('nothing user data'))
+                    }
+                }).catch(err => {
+                    reject(err)
+                })
+            })
+        },
+        logout({ commit }) {
+            return new Promise((resolve, reject) => {
+                cache.removeToken()
+                resetRouter()
+                commit('SET_USER', '')
+                resolve()
+            })
+        }
+    }
+}
diff --git a/src/store/modules/routes.js b/src/store/modules/routes.js
new file mode 100644
index 00000000..d2f67b5c
--- /dev/null
+++ b/src/store/modules/routes.js
@@ -0,0 +1,73 @@
+import { localRoutes, asyncRoutes } from '@/router'
+
+export default {
+    namespaced: true,
+    state: {
+        allRoutes: [], // 全部路由
+        sideRoutes: [] // 侧边栏路由
+    },
+    mutations: {
+        SET_ALL_ROUTES: (state, routes) => {
+            state.allRoutes = [...routes]
+        },
+        SET_SIDE_ROUTES: (state, routes) => {
+            state.sideRoutes = [...routes]
+        }
+    },
+    actions: {
+        generateRoutes({ commit }) {
+            return new Promise(resolve => {
+                asyncParentRoutes.children = [...asyncRoutes, extraPanentRoutes]
+                const sideRoutes = setRedirect([asyncParentRoutes])
+                const addRoutes = [...sideRoutes, extraGlobalRoutes] // 实际动态添加的路由
+                const allRoutes = [...localRoutes, ...addRoutes] // 所有路由
+                commit('SET_SIDE_ROUTES', sideRoutes)
+                commit('SET_ALL_ROUTES', allRoutes)
+                resolve(addRoutes)
+            })
+        }
+    }
+}
+
+const asyncParentRoutes = {
+    name: 'index',
+    path: '/index',
+    component: () => import('@/pages/index/index'),
+    meta: {
+        login: true
+    },
+    children: []
+}
+const extraPanentRoutes = {
+    name: 'redirect',
+    path: 'redirect/:path*',
+    component: () => import('@/pages/other/redirect'),
+    meta: {
+        hidden: true
+    }
+}
+const extraGlobalRoutes = {
+    path: '*',
+    redirect: '/page404'
+}
+
+// 自动设置路由的重定向（有子路由前提下）
+function setRedirect(routes, redirect = '') {
+    routes.forEach(route => {
+        if (route.children && route.children.length > 0) {
+            if (!route.redirect) {
+                let defaultRedirectRoute = route.children.filter(item => !item.meta || !item.meta.hidden)[0]
+                let redirectIndex = route.meta && route.meta.redirectIndex
+                if (redirectIndex) {
+                    defaultRedirectRoute = route.children[redirectIndex]
+                }
+                let redirectName = defaultRedirectRoute.name
+                route.redirect = `${redirect}/${route.name}/${redirectName}`
+            }
+            let index = route.redirect && route.redirect.lastIndexOf('/')
+            let fatherDir = route.redirect && route.redirect.substring(0, index)
+            route.children = setRedirect(route.children, fatherDir)
+        }
+    })
+    return routes
+}
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
new file mode 100644
index 00000000..3d129c07
--- /dev/null
+++ b/src/store/modules/tagsView.js
@@ -0,0 +1,72 @@
+import path from 'path'
+import { isExternal } from '@/utils/validate'
+
+export default {
+    namespaced: true,
+    state: {
+        tagsView: []
+    },
+    mutations: {
+        SET_TAGS_VIEW(state, views) {
+            state.tagsView = [...views]
+        },
+        ADD_TAGS_VIEW(state, view) {
+            if (view.name) {
+                if (state.tagsView.some(v => v.path === view.path)) return
+                state.tagsView.push({ ...view })
+            }
+        },
+        CLOSE_TAGS_VIEW(state, view) {
+            let index = state.tagsView.findIndex(v => v.path === view.path)
+            state.tagsView.splice(index, 1)
+        },
+        CLOSE_OTHER_TAGS_VIEW(state, view) {
+            state.tagsView = state.tagsView.filter(v => v.meta.affix || v.path === view.path)
+        },
+        CLEAR_TAGS_VIEW(state) {
+            state.tagsView = state.tagsView.filter(v => v.meta.affix)
+        }
+    },
+    actions: {
+        initTagsView({ commit, rootState }) {
+            let affixTags = filterAffixTags(rootState.routes.sideRoutes[0].children)
+            commit('SET_TAGS_VIEW', affixTags)
+            function filterAffixTags(routes, basePath = '/index') {
+                let tags = []
+                routes.forEach(route => {
+                    // 过滤外链
+                    if (!isExternal(route.path)) {
+                        let tagPath = path.resolve(basePath, route.path)
+                        if (route.meta && route.meta.affix) {
+                            tags.push({
+                                fullPath: tagPath,
+                                path: tagPath,
+                                name: route.name,
+                                meta: { ...route.meta }
+                            })
+                        }
+                        if (route.children) {
+                            const tempTags = filterAffixTags(route.children, tagPath)
+                            if (tempTags.length >= 1) {
+                                tags = [...tags, ...tempTags]
+                            }
+                        }
+                    }
+                })
+                return tags
+            }
+        },
+        closeTagsView({ state, commit }, view) {
+            return new Promise(resolve => {
+                commit('CLOSE_TAGS_VIEW', view)
+                resolve([...state.tagsView])
+            })
+        },
+        clearTagsView({ state, commit }, view) {
+            return new Promise(resolve => {
+                commit('CLEAR_TAGS_VIEW', view)
+                resolve([...state.tagsView])
+            })
+        }
+    }
+}
diff --git a/src/utils/permission.js b/src/utils/permission.js
index 1e50f76f..8500ed9f 100755
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -5,34 +5,35 @@ import cache from '@/utils/cache'
 // 登录验证，权限验证
 router.beforeEach((to, from, next) => {
     // 是否需要登录
-    if (to.matched.some(record => record.meta.login)) {
-        if (cache.getToken()) {
-            if (to.path === '/login') {
-                next('/')
+    if (cache.getToken()) {
+        if (to.path === '/login') {
+            next('/index')
+            // next()
+        } else {
+            // 是否已有用户信息
+            let userInfo = store.state.login.user
+            if (userInfo) {
+                assessPermission(userInfo.roles, to.meta.roles, next)
             } else {
-                // 是否已有用户信息
-                if (store.state.user) {
-                    assessPermission(store.state.user.role, to.meta.role, next)
-                } else {
-                    store.dispatch('GET_USER_DATA').then(res => {
-                        assessPermission(res.role, to.meta.role, next)
-                    }).catch(err => {
-                        console.log(err)
-                        // 可根据错误信息，做相应需求，这里默认token值失效
-                        window.alert('登录已失效，请重新登录')
-                        store.commit('SET_LOGOUT')
-                        next({ path: '/login', query: { redirect: to.fullPath } })
+                store.dispatch('login/getUserData').then(res => {
+                    store.dispatch('routes/generateRoutes').then(addRoutes => {
+                        router.addRoutes(addRoutes)
+                        next({ ...to, replace: true })
                     })
-                }
+                }).catch(err => {
+                    console.log(err)
+                    // 可根据错误信息，做相应需求，这里默认token值失效
+                    window.alert('登录已失效，请重新登录')
+                    store.commit('login/SET_LOGOUT')
+                    next({ path: '/login', query: { redirect: to.fullPath } })
+                })
             }
-        } else {
-            next({ path: '/login', query: { redirect: to.fullPath } })
         }
     } else {
-        if (to.path === '/login' && cache.getToken()) {
-            next('/')
-        } else {
+        if (to.path === '/login') {
             next()
+        } else {
+            next({ path: '/login', query: { redirect: to.fullPath } })
         }
     }
 })
diff --git a/src/utils/request.js b/src/utils/request.js
index 77c46fde..65680f45 100755
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -35,13 +35,13 @@ instance.interceptors.response.use(response => {
     return Promise.reject(error)
 })
 
-/*
-* request方法（统一axios请求方法的格式）
-* url       请求URL
-* type      请求类型
-* data      参数
-* isForm    是否表单数据
-*/
+/**
+ * @param   {String}    url     请求链接
+ * @param   {String}    type    http方法
+ * @param   {Object}    data    数据
+ * @param   {Boolean}   isForm  是否表单格式
+ * @returns {Promise}
+ */
 export const request = async (url = '', type = 'GET', data = {}, isForm = false) => {
     let result
     type = type.toUpperCase()
@@ -52,8 +52,14 @@ export const request = async (url = '', type = 'GET', data = {}, isForm = false)
     if (isForm) {
         let form = new FormData()
         Object.keys(data).forEach(key => {
-            console.log('key', key)
-            form.append(key, data[key])
+            let value = data[key]
+            if (Array.isArray(value)) {
+                value.forEach(item => {
+                    form.append(key, item)
+                })
+            } else {
+                form.append(key, data[key])
+            }
         })
         data = form
     }
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 00000000..4393187f
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,7 @@
+/**
+ * @param   {String}    path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+    return /^(https?:|mailto:|tel:)/.test(path)
+}