Vue-router 持久化以及常见配置

1,为啥要持久化

因为一刷新页面数据就没了，不开心。。。。

2，解决步骤

1，安装插件

npm install --save vue-router-storage

2，添加代码到主文件 main.js

import Vue from 'vue'
import RouterStorage from 'vue-router-storage'

Vue.use(RouterStorage,{
    showLog: false,
    stayHere: true,
    instanceName: '$history'
});

3，怎么使

// 获取实例
this.$history

// 清除历史数据
this.$history.clear();

// 监听返回事件  goback
vm.$on('router.goback', function() {
    console.log('goback event')
});

// 监听跳转事件
vm.$on('router.replace', function() {
    
})

// 监听前进事件
vm.$on('router.goforward', function() {

})

//监听组件中的路径更改并获取路径列表
watch: {
    '$history.routes'(val) {
        // this.path = val
    }
}

//倾听尝试离开Vue应用程序事件（StayHere为真时触发）
vm.$on('router.inroot', function () {
  console.log('inroot event')
})

vue-router 一般配置

export default new Router({
  mode: 'history', // 推荐设置为历史模式
  base: "/file/",  // 如果项目打包上线以后需要放到域名下特定的文件夹内，例如：www.xxx.com/file/ 则需要配置此选项，否则路由会出现问题
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {index:2},
      component: () => import('../views/Index.vue'), 
    }
  ]
})