【金秋打卡】第20天 tagsView

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容

        tagsView是在appMain 上方的一个标题栏 和汉堡有点像点击也能跳转 但是多了 可以右键操作

首先需要定义一个常量 

// tags
export const TAGS_VIEW = 'tagsView'

import { LANG, TAGS_VIEW } from '@/constant'
import { getItem, setItem } from '@/utils/storage'
export default {
  namespaced: true,
  state: () => ({
    ...
    tagsViewList: getItem(TAGS_VIEW) || []
  }),
  mutations: {
    ...
    /**
     * 添加 tags
     */
    addTagsViewList(state, tag) {
      const isFind = state.tagsViewList.find(item => {
        return item.path === tag.path      })
    // 处理重复
      if (!isFind) {
        state.tagsViewList.push(tag)
        setItem(TAGS_VIEW, state.tagsViewList)
      }
    }
  },
  actions: {}}

在vuex缓存中新增变量 处理业务逻辑 比如 新增tags时 和 点击重复的tags时 的操作

在appmain 页面中 需要 监听路由变话

const route = useRoute()

/**
 * 生成 title
 */
const getTitle = route => {
  let title = ''
  if (!route.meta) {
    // 处理无 meta 的路由
    const pathArr = route.path.split('/')
    title = pathArr[pathArr.length - 1]
  } else {
    title = generateTitle(route.meta.title)
  }
  return title
}

/**
 * 监听路由变化
 */
const store = useStore()
watch(
  route,
  (to, from) => {
    if (!isTags(to.path)) return
    const { fullPath, meta, name, params, path, query } = to
    store.commit('app/addTagsViewList', {
      fullPath,
      meta,
      name,
      params,
      path,
      query,
      title: getTitle(to)
    })
  },
  {
    immediate: true
  }
)

将我们所需要的信息 存储到vuex中

在工具中需要判断排除一些不需要出现的页面 比如404 这类

const whiteList = ['/login', '/import', '/404', '/401']/**
 * path 是否需要被缓存
 * @param {*} path
 * @returns
 */
 export function isTags(path) {
  return !whiteList.includes(path)
 }