为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第20天 tagsView

【金秋打卡】第20天 tagsView

2022.11.12 10:34 355浏览

课程名称:基于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)
 }


https://img3.sycdn.imooc.com/636efdf60001f05414460888.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
15
获赞与收藏
9

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

152篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消