缓存方案1

assets/js/requestApi.js

@@ -87,6 +87,7 @@ export default {
   },
   // 获取角色权限列表
   roleAuthList(obj) { return this.wRequest('/xhr/getMenus', obj) },
+  getList(obj, param) { return this.wRequest('/goods/listPage.json', obj, param) },
   server_getConfig(key) {
     if (process.env.WD_ENV === 'production') {
       var configp = require('../config/config-prod.json')

layouts/default.vue

@@ -23,13 +23,13 @@
                 <i class="el-icon-location"></i>
                 <span>{{item.name}}</span>
               </template>
-              <el-menu-item :class="$route.path===sub.path?'orderCtg_list_now':''" :index="sub.path" v-for="(sub, subIndex) in item.pageList">{{sub.name}}</el-menu-item>
+              <el-menu-item @click="select(sub.path)" :class="$route.path===sub.path?'orderCtg_list_now':''" :index="sub.path" v-for="(sub, subIndex) in item.pageList">{{sub.name}}</el-menu-item>
             </el-submenu>
           </el-menu>
         </div>
       </keep-alive>
         <!-- 侧边栏结束 -->
-        <div class="main_right">
+        <div class="main_right" :style="{width: clientWidth + 'px'}">
           <div class="crumbs">
             <div class="y_flex_start" >
               <div @click="toleft"><</div>
@@ -50,7 +50,14 @@
               <li @click="closeAllTags">关闭所有</li>
             </ul>
           </div>
-          <nuxt class="content"/>
+          <!--<nuxt class="content"/>-->
+          <keep-alive v-if="keepAlive === '1'">
+            <router-view class="content"></router-view> 
+          </keep-alive>
+          <router-view class="content1" v-if="keepAlive !== '1'"></router-view>
+          <!--<keep-alive>
+            <router-view class="content"></router-view>
+          </keep-alive>-->
         </div>
       </div>
     </div>
@@ -74,13 +81,15 @@ export default {
       orderList: [],
       financeList: [],
       clientHeight: 0,
+      clientWidth: 0,
       visible: false,
       left: 0,
       selectedTag: {},
       leftMenuList: [],
       isRoute: true,
       moveLength: 130,
-      moveNum: 0
+      moveNum: 0,
+      keepAlive: '2'
     }
   },
   computed: {
@@ -290,6 +299,7 @@ export default {
 //      clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
 //    }
       this.clientHeight = document.documentElement.clientHeight - 76
+      this.clientWidth = document.documentElement.clientWidth - 240
     },
     toleft() {
       if (this.moveNum !== 0) {
@@ -299,11 +309,27 @@ export default {
       }
     },
     toright() {
+      console.log(this.visitedViews.length)
       this.moveNum --
       let root = document.getElementsByClassName('crumbs_text')[0]
       root.style.cssText = 'transform: translateX(' + this.moveLength * this.moveNum + 'px);'
+    },
+    select(e) {
+      console.log(e)
+      if (e === '/sys/usr/managers') {
+        YCookie.setLocalCookie('keepAlive', '1')
+      } else {
+        YCookie.setLocalCookie('keepAlive', '2')
+      }
+      console.log(YCookie.readLocalCookie('keepAlive'))
+      console.log('aaaaaaaaaaaaaaa')
     }
   },
+  updated() {
+    this.keepAlive = YCookie.readLocalCookie('keepAlive')
+    console.log('-----------')
+    console.log(this.keepAlive)
+  },
   mounted() {
     this.getClientHeight()
     if (YCookie.readLocalCookie('tabNow') === undefined || YCookie.readLocalCookie('tabNow') === '') {
@@ -395,11 +421,10 @@ export default {
   font-weight: bold;
 }
 .main_left{
-  width: 13%;
   background: #E8E9EE;
+  width: 240px;
 }
 .main_right{
-  width: 87%;
   position: relative;
 }
 .crumbs{

nuxt.config-dev.js

@@ -2,6 +2,7 @@ var merge = require('webpack-merge')
 var baseConfig = require('./nuxt.config.js')
 module.exports = merge(baseConfig, {
   proxy: {
-    '/xhr/': 'http://yapi.yang800.cn/mock/31'
+    '/xhr/': 'http://yapi.yang800.cn/mock/31',
+    '/goods/': 'https://m.yang800.com/backend/xhr'
     }
 })

pages/sys/usr/components/page.vue

+<template>
+  <div class="container">
+    <div v-for="item in unpayList">{{item.name}}</div>
+    <div @click="toDetail">详情</div>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="pagination.page"
+        :page-sizes="[10,20,30, 50]"
+        :page-size="pagination.size"
+        :total="total"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import requestApi from '../../../../assets/js/requestApi.js'
+import YCookie from '../../../../assets/js/yCookie.js'
+export default {
+  data() {
+    return {
+      total: 80,
+      pagination: {
+        page: 1,
+        size: 10
+      },
+      unpayList: []
+    }
+  },
+  methods: {
+    getList: async function () {
+      let param = {
+        storeId: 25,
+        categoryId: 0,
+        pageNo: this.pagination.page,
+        pageSize: this.pagination.size
+      }
+      let obj = await requestApi.getList(this, param)
+      this.unpayList = obj.data.result
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.page = val
+      this.getList()
+    },
+    toDetail() {
+      this.$router.push({
+        path: 'detail'
+      })
+      YCookie.setLocalCookie('keepAlive', '1')
+      console.log('1111111111111111111111111')
+      console.log(YCookie.readLocalCookie('keepAlive'))
+    }
+  },
+  mounted() {
+    this.getList()
+    console.log('00')
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

pages/sys/usr/components/zj.vue

+<template>
+  <div class="container">
+    <div>{{count}}</div>
+    <button @click="b">plus</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 1
+    }
+  },
+  methods: {
+    b() {
+      this.count++
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

pages/sys/usr/detail.vue

+<template>
+  <section class="container">
+    <nuxt-link to="managers">返回</nuxt-link>
+  </section>
+</template>
+
+<script>
+  import YCookie from '../../../assets/js/yCookie.js'
+  export default {
+    data() {
+      return {}
+    },
+    methods: {
+    },
+    // 详情页面的beforeRouteLeave钩子函数
+    beforeRouteLeave(to, from, next) {
+      console.log(to.name)
+      if (to.name === 'sys-usr-managers') {
+        YCookie.setLocalCookie('keepAlive', '1')
+        console.log('详情页面的beforeRouteLeave钩子函数')
+        console.log(YCookie.readLocalCookie('keepAlive'))
+      }
+      next()
+    }
+  }
+</script>
+
+<style scoped>
+.title
+{
+  margin: 50px 0;
+}
+</style>

pages/sys/usr/front-users.vue

@@ -3,9 +3,20 @@
     <h1 class="title">
       {{$route.name}}
     </h1>
+    <zj></zj>
   </section>
 </template>
 
+<script>
+import zj from './components/zj.vue'
+export default {
+  components: {
+    zj
+  },
+  methods: {}
+}
+</script>
+
 <style scoped>
 .title
 {

pages/sys/usr/managers.vue

 <template>
-  <section class="container">
+  <div class="app-container">
     <h1 class="title">
       {{$route.name}}
     </h1>
-  </section>
+    <page></page>
+  </div>
 </template>
 
-<style scoped>
-.title
-{
-  margin: 50px 0;
+<script>
+import page from './components/page.vue'
+export default {
+  components: {
+    page
+  },
+  methods: {}
 }
+</script>
+
+<style scoped>
 </style>

pages/sys/usr/suppliers.vue

@@ -3,9 +3,29 @@
     <h1 class="title">
       {{$route.name}}
     </h1>
+    <div class="block">
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        :total="400"
+        background
+        layout="total, sizes, prev, pager, next"/>
+    </div>
   </section>
 </template>
 
+<script>
+
+export default {
+  data() {
+    return {
+      currentPage: 5
+    }
+  }
+}
+</script>
+
 <style scoped>
 .title
 {