vue 实现点击菜单出现导航页以及keep-alive缓存和上传文件时的字段格式

// 在路由中设置meta属性 router/index.js
{
        path: '/index/user',
        meta: {
          keepAlive: true, 
          //将此页面缓存下来，在此页面输入内容，切换页面后回到此页面依然有之前输入的内容
          title: '账户管理'
        },
        name: 'userList',
        component: () => import(）
      },
      //将名字设置为标签页中显示的名称
      router.beforeEach((to, from, next) => {
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

// index.vue
//遍历浏览过的路由，获取路由名称显示在页面上
  <router-link
                v-for="(tag,i) in Array.from(visitedViews)"
                :to="tag.path"
                :key="i"
                class="tags-view-item"
                :class="isActive(tag)?'active':''"
              >
     <p class="tagTitle">{{tag.title}}</p>
                <p>
                  <a-icon type="close" @click.prevent.stop="delSelectTag(tag)" class="closeTitle" />
                </p>
              </router-link>
              // 页面出口处    缓存
<transition>
                <keep-alive>
                  <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
              </transition>
              <router-view v-if="!$route.meta.keepAlive"></router-view>


              computed(){
              visitedViews(){
              //获取浏览过的路由
              return this.$store.state.visitedViews
              }
              watch:{
              $route(){}
              }
              methods:{
              isActive(route){
              //浏览过的路由和当前点击的路由相等时改变class
              return route.path === this.$route.path
              }，
              addViewTags(){
              if(this.$route.name){
                 //路由改变时执行的方法
              const route = this.$route
              this.$store.dispatch("addVisitedViews",route)
              }
           
              }
              
delSelectTag(route){
//删除路由，当前点击的路由和浏览过的路由相等时,删除，并将页面跳转到最后一个路由
this.$stroe.dispatch('delVisitedViews',route).then(views=>{
// views是删除当前点击后的路由，剩下的路由
if(this.isActive(route)){
// slice(-1)就表示字符串的最后一个字符
const lastView=visitedViews.slice(-1)
 if (lastView) {
 //本来是写的lastView，但是因为新增和修改是同一个页面，所以删除新增标签后，、//页面显示还是新增页面的内容，但是localstorage中的已经删除了，所以加上lastView.path
            this.$router.push(lastView.path)
          } else {
            this.$router.push('/')
          }
}
}
}

// store/user/getter.js
const getters = {
  visitedViews: state => {
    return state.tagsView.visitedViews
  }
}
export default getters
// store/user/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getter.js'

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
   visitedViews: sessionStorage.getItem('visitedViews') ? JSON.parse(sessionStorage.getItem('visitedViews')) : []
 //   visitedViews: []
  },
  mutations: {
    ADD_VISITED_VIEWS: (state, view) => {
      if (state.visitedViews.some(v => v.path === view.path)) return
      state.visitedViews.push({
        name: view.name,
        path: view.path,
        // keepAlive: view.meta.keepAlive,
        title: view.meta.title || 'no-title'
      })
      sessionStorage.setItem('visitedViews', JSON.stringify(state.visitedViews))
    },
    DEL_VISITED_VIEWS: (state, view) => {
      for (const [i, v] of state.visitedViews.entries()) {
        if (v.path === view.path) {
          // 如果vuex的路由和当前点击的路由一致，则删除当前路由
          state.visitedViews.splice(i, 1)
          sessionStorage.setItem('visitedViews', JSON.stringify(state.visitedViews))
          break
        }
      }
    }
  },
  actions: {
    addVisitedViews ({ commit }, view) {
      console.log('view', view)
      commit('ADD_VISITED_VIEWS', view)
    },
    delVisitedViews ({ commit, state }, view) {
      return new Promise((resolve) => {
      // view是当前删除的路由
        console.log('view1', view)
        

        commit('DEL_VISITED_VIEWS', view)
        resolve([...state.visitedViews])
      })
    }
  },
  getters

})

export default store

//上传文件
async uploadFile (file) {
      const formData = new FormData()
      formData.append('file', file)
    
      const res = await axios({
        method: 'post',
        url: '',
        data: formData
      })
// 缓存会有很多bug，所以在判断路径的时候用fulpath去判断比较精准
点击取消按钮并且将当前页面关闭
  btnCancel () {
      this.$router.go(-1)
      this.$store.state.visitedViews.splice(
        this.$store.state.visitedViews.findIndex(
          item => item.path === this.$route.path
        ), 1

      )
      sessionStorage.setItem('visitedViews', JSON.stringify(this.$store.state.visitedViews))
    },