优化页面刷新功能、调整空布局页

src/components/ThemeSetting/index.vue

@@ -41,8 +41,7 @@
                         <el-radio-button :label="true">开启</el-radio-button>
                         <el-radio-button :label="false">关闭</el-radio-button>
                     </el-radio-group>
-                    <el-alert title="该功能为页面右上角的刷新按钮" type="info" :closable="false" />
-                    <el-alert title="不建议开启，该功能使用场景极少，用户习惯于通过浏览器上的刷新按钮，或者 F5 键进行页面刷新" type="warning" :closable="false" />
+                    <el-alert title="该功能为页面右上角的刷新按钮，开启时会阻止 F5 键原刷新功能，并采用框架提供的刷新模式进行页面刷新" type="info" :closable="false" />
                 </el-form-item>
                 <el-form-item label="加载进度条">
                     <el-radio-group v-model="enableProgress">

src/layout/empty.vue

@@ -0,0 +1,16 @@
+<template>
+    <RouterView />
+</template>
+
+<script>
+export default {
+    name: 'EmptyLayout',
+    props: {},
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {}
+}
+</script>

src/layout/index.vue

@@ -88,7 +88,7 @@
                     <div class="main">
                         <transition name="main" mode="out-in">
                             <keep-alive :include="$store.state.keepAlive.list">
-                                <RouterView />
+                                <RouterView :key="$route.path" />
                             </keep-alive>
                         </transition>
                     </div>
@@ -106,6 +106,7 @@
 import variables from '@/assets/styles/resources/variables.scss'
 
 export default {
+    inject: ['reload'],
     name: 'Layout',
     data() {
         return {
@@ -144,8 +145,16 @@ export default {
     },
     mounted() {
         this.$hotkeys('alt+s', e => {
-            e.preventDefault()
-            this.$store.commit('global/toggleSearch')
+            if (this.$store.state.global.enableNavSearch) {
+                e.preventDefault()
+                this.$store.commit('global/toggleSearch')
+            }
+        })
+        this.$hotkeys('f5', e => {
+            if (this.$store.state.global.enablePageReload) {
+                e.preventDefault()
+                this.reload(2)
+            }
         })
         window.addEventListener('scroll', this.onScroll)
     },

src/layout/keepAlive.vue

@@ -1,37 +0,0 @@
-<template>
-    <div>
-        <transition name="main" mode="out-in">
-            <keep-alive :include="$store.state.keepAlive.list">
-                <RouterView />
-            </keep-alive>
-        </transition>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'KeepAliveLayout',
-    props: {},
-    data() {
-        return {}
-    },
-    created() {},
-    mounted() {},
-    methods: {}
-}
-</script>
-
-<style lang="scss" scoped>
-.main-enter-active,
-.main-leave-active {
-    transition: all 0.3s;
-}
-.main-enter {
-    opacity: 0;
-    margin-left: -20px;
-}
-.main-leave-to {
-    opacity: 0;
-    margin-left: 20px;
-}
-</style>

src/router/index.js

@@ -7,7 +7,7 @@ import 'nprogress/nprogress.css' // progress bar style
 Vue.use(Router)
 
 import Layout from '@/layout'
-import KeepAliveLayout from '@/layout/keepAlive'
+import EmptyLayout from '@/layout/empty'
 
 const constantRoutes = [
     {
@@ -33,7 +33,7 @@ const constantRoutes = [
             },
             {
                 path: 'personal',
-                component: KeepAliveLayout,
+                component: EmptyLayout,
                 redirect: '/personal/setting',
                 meta: {
                     title: '个人中心',

src/router/modules/breadcrumb.example.js

@@ -1,5 +1,5 @@
 import Layout from '@/layout'
-import KeepAliveLayout from '@/layout/keepAlive'
+import EmptyLayout from '@/layout/empty'
 
 export default {
     path: '/breadcrumb_example',
@@ -32,7 +32,7 @@ export default {
         {
             path: 'list2',
             name: 'breadcrumbExampleList2',
-            component: KeepAliveLayout,
+            component: EmptyLayout,
             redirect: '/breadcrumb_example/list2',
             meta: {
                 title: '列表2（层级模式）'

src/router/modules/keep.alive.example.js

@@ -1,5 +1,5 @@
 import Layout from '@/layout'
-import KeepAliveLayout from '@/layout/keepAlive'
+import EmptyLayout from '@/layout/empty'
 
 export default {
     path: '/keep_alive_example',
@@ -33,7 +33,7 @@ export default {
         },
         {
             path: 'detail2',
-            component: KeepAliveLayout,
+            component: EmptyLayout,
             redirect: '/keep_alive_example/detail2',
             meta: {
                 title: '下级路由',
@@ -51,7 +51,7 @@ export default {
                 },
                 {
                     path: 'detail3',
-                    component: KeepAliveLayout,
+                    component: EmptyLayout,
                     redirect: '/keep_alive_example/detail2/detail3',
                     meta: {
                         title: '下下级路由',

src/router/modules/multilevel.menu.example.js

@@ -1,5 +1,5 @@
 import Layout from '@/layout'
-import KeepAliveLayout from '@/layout/keepAlive'
+import EmptyLayout from '@/layout/empty'
 
 export default {
     path: '/multilevel_menu_example',
@@ -22,7 +22,7 @@ export default {
         {
             path: 'level2',
             name: 'multilevelMenuExample2',
-            component: KeepAliveLayout,
+            component: EmptyLayout,
             redirect: '/multilevel_menu_example/level2/page',
             meta: {
                 title: '导航2'
@@ -39,7 +39,7 @@ export default {
                 {
                     path: 'level3',
                     name: 'multilevelMenuExample2-2',
-                    component: KeepAliveLayout,
+                    component: EmptyLayout,
                     redirect: '/multilevel_menu_example/level2/level3/page1',
                     meta: {
                         title: '导航2-2'