Vue 页面缓存, 项目遇到的,圆满解决

Vue-navigation   

需要 vue 2.x 与 vue-router 2.x。

导航默认行为类似手机APP的页面导航（A、B、C为页面）：

1. A前进到B，再前进到C；
2. C返回到B时，B会从缓存中恢复；
3. B再次前进到C，C会重新生成，不会从缓存中恢复；
4. C前进到A，A会生成，现在路由中包含2个A实例。

！重要：vue-navigation在url中添加了一个key来区分路由。key的名称默认为VNK，可以修改。

 

安装

npm i -S vue-navigation

基础使用

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router})
// 启动你的应用...

App.vue

<template>
  <navigation>
    <router-view></router-view>
  </navigation>
</template>

搭配vuex2使用

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import store from './store' // vuex store 实例
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router, store})
// 启动你的应用...

传入 store 后，vue-navigation 会向 store 注册一个Module（Module的默认名称为 navigation），同时在页面跳转时会提交 navigation/FORWARD 或 navigation/BACK 或 navigation/REFRESH。

Options

只有route是必须的.

Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})

事件

方法: [ on | once | off ]

事件类型: [ forward | back | replace | refresh | reset ]

参数( to | from ) 的属性:

• name
  • 类型: string
  • 描述: 路由的名称（包含key）
• route
  • 类型: object
  • 描述: vue-route的路由信息对象

this.$navigation.on('forward', (to, from) => {})
this.$navigation.once('back', (to, from) => {})
this.$navigation.on('replace', (to, from) => {})
this.$navigation.off('refresh', (to, from) => {})
this.$navigation.on('reset', () => {})

方法

在全局环境中使用 Vue.navigation 或在Vue实例中使用 this.$navigation

• getRoutes() 获取路由记录
• cleanRoutes() 清空路由记录

 

• index.js如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      // name: 'Inedx',
      component: resolve => require(['@/pages/index'], resolve),
      children: [
        {
          path: '/',
          // name: 'Main',
          component: resolve => require(['@/pages/main/index'], resolve),
          children: [{
            path: '/',
            name: 'Home',
            component: resolve => require(['@/pages/main/home'], resolve)
          },
          {
            path: '/booking',
            name: 'Booking',
            component: resolve => require(['@/pages/main/booking'], resolve),
            children: [{
              path: '/booking',
              name: 'ticketsResult',
              component: resolve => require(['@/pages/main/booking/ticketsResult'], resolve)
            },
            {
              path: '/booking/ticketsBooking',
              name: 'ticketsBooking',
              meta: { keepAlive: true },//缓存 fgj
              component: resolve => require(['@/pages/main/booking/ticketsBooking'], resolve)
            },
            {
              path: '/booking/orderPay',
              name: 'orderPay',
              meta: { keepAlive: false },
              component: resolve => require(['@/pages/main/booking/orderPay'], resolve)
            },
            {
              path: '/booking/confirmPayment',
              name: 'confirmPayment',
              meta: { keepAlive: false },              
              component: resolve => require(['@/pages/main/booking/confirmPayment'], resolve)
            }]
          },
          {
            path: '/consult',
            name: 'Consult',
            component: resolve => require(['@/pages/main/consult'], resolve)
          },
          {
            path: '/center',
            name: 'Center',
            component: resolve => require(['@/pages/main/center'], resolve)
          }, {
            path: '/server',
            name: 'Server',
            component: resolve => require(['@/pages/main/server'], resolve)
          },
          {
            path: '/login',
            name: 'Login',
            component: resolve => require(['@/pages/login/login'], resolve)
          },
          {
            path: '/rigister_verifyMobile',
            name: 'Rigister_verifyMobile',
            component: resolve => require(['@/pages/login/rigister_verifyMobile'], resolve)
          },
          {
            path: '/rigister_setPsw',
            name: 'Rigister_setPsw',
            component: resolve => require(['@/pages/login/rigister_setPsw'], resolve)
          },
          {
            path: '/rigister_success',
            name: 'Rigister_success',
            component: resolve => require(['@/pages/login/rigister_success'], resolve)
          },
          {
            path: '/forgetPsw_verifyMobile',
            name: 'ForgetPsw_verifyMobile',
            component: resolve => require(['@/pages/login/forgetPsw_verifyMobile'], resolve)
          },{
            path: '/error',
            name: 'error',
            component: resolve => require(['@/pages/main/error'], resolve)
          },
          {
            path: '/paxNotice',
            name: 'paxNotice',
            component: resolve => require(['@/pages/notes/paxNotice'], resolve)
          },
          {
            path: '/termsService',
            name: 'termsService',
            component: resolve => require(['@/pages/notes/termsService'], resolve)
          }]
        }
      ]
    }
  ]
})

 

 

//ticketsBooking.vue
 watch: {
        passInfo: function(passInfo) {
            this.passBunkInfo = passInfo;
        },
        $route: function(to, from) {
            console.log(to, from); 
    //to里面显示
//meta:{keepAlive: true}
//name:"ticketsBooking"
            // if (from.name == "ticketsResult") {
            // }
        }
    },

 

 

•