feat:vue-elemet-admin升级改造

src/layout/components/AppMain.vue

@@ -1,23 +1,33 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <router-view :key="key"/>
-    </transition>
+    <router-view v-slot="{ Component }">
+      <transition name="router-fade" mode="out-in">
+        <keep-alive :include="cachedViews()">
+          <component :is="Component" :key="key"/>
+        </keep-alive>
+      </transition>
+    </router-view>
   </section>
 </template>
 
-<script lang="ts">
 
-import {useRoute} from "vue-router";
+<script lang="ts">
 import {defineComponent} from "vue";
+import {useStore} from '@/store'
+import {useRoute} from "vue-router";
 
 export default defineComponent({
   setup() {
+    const store = useStore()
     const route = useRoute()
+    const cachedViews = () => {
+      return store.state.tagsView.cachedViews
+    }
     const key = () => {
       return route.path
     }
     return {
+      cachedViews,
       key
     }
   }

src/layout/components/Navbar.vue

@@ -1,22 +1,33 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb class="breadcrumb-container"/>
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click">
+      <template v-if="device!=='mobile'">
+<!--        <search id="header-search" class="right-menu-item" />
+
+        <error-log class="errLog-container right-menu-item hover-effect" />-->
+
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+<!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>-->
+
+      </template>
+
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom"/>
+          <i class="el-icon-caret-bottom" />
         </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-menu slot="dropdown">
           <router-link to="/">
-            <el-dropdown-item>
-              Home
-            </el-dropdown-item>
+            <el-dropdown-item>Dashboard</el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
             <el-dropdown-item>Github</el-dropdown-item>
           </a>
           <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
@@ -30,18 +41,19 @@
     </div>
   </div>
 </template>
-
 <script>
 import {reactive,computed,toRefs} from "vue";
 import {useStore} from "@/store";
 import {useRoute,useRouter} from "vue-router"
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
+import Screenfull from '@/components/screenfull/index.vue'
 
 export default {
   components: {
     Breadcrumb,
-    Hamburger
+    Hamburger,
+    Screenfull
   },
   setup() {
     const store = useStore()

src/layout/components/Sidebar/index.vue

@@ -22,7 +22,7 @@
 <script>
 import {computed, defineComponent} from "vue";
 import SidebarItem from './SidebarItem.vue'
-import SidebarLogo from './Logo.vue'
+import Logo from './Logo.vue'
 import variables from '@styles/variables.scss'
 import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
@@ -31,7 +31,7 @@ import {useRoute} from 'vue-router'
 export default defineComponent({
   components: {
     SidebarItem,
-    SidebarLogo
+    Logo
   },
   setup() {
     const store = useStore()
@@ -39,6 +39,9 @@ export default defineComponent({
     const sidebar = computed(() => {
       return store.state.app.sidebar
     })
+    const routes = computed(() => {
+      return store.state.permission.routes
+    })
     const showLogo = computed(() => {
       return store.state.settings.sidebarLogo
     })
@@ -56,7 +59,7 @@ export default defineComponent({
 
     return {
       sidebar,
-      route,
+      routes,
       showLogo,
       variables,
       activeMenu,

src/layout/components/TagsView/index.vue

@@ -51,9 +51,9 @@ export default defineComponent({
     const instance = getCurrentInstance()
     const currentRoute = useRoute()
     const scrollPaneRef = ref(null)
-    const {ctx} = instance
+    const {ctx} = instance as any
 
-    const toLastView=(visitedViews,view)=>{
+    const toLastView=(visitedViews:TagView[],view:TagView)=>{
       const latestView = visitedViews.slice(-1)[0]
       if (latestView && latestView.fullPath) {
         router.push(latestView.fullPath)
@@ -70,12 +70,12 @@ export default defineComponent({
       visible: false,
       top: 0,
       left: 0,
-      selectedTag: {},
-      affixTags: [],
-      isActive: (route) => {
+      selectedTag: {} as TagView,
+      affixTags: [] as TagView[],
+      isActive: (route:TagView) => {
         return route.path === currentRoute.path
       },
-      isAffix: (tag) => {
+      isAffix: (tag:TagView) => {
         return tag.meta && tag.meta.affix
       },
       refreshSelectedTag: (view: TagView) => {