vue--管理后台手把手搭建-----（5）

最新推荐文章于 2025-07-06 14:12:37 发布

hx_1199

最新推荐文章于 2025-07-06 14:12:37 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 管理后台

本文链接：https://blog.youkuaiyun.com/hx_1199/article/details/82800537

本文档详细介绍了使用Vue搭建管理后台的过程中，如何实现权限管理和Tag标签功能。首先，阐述了如何根据用户权限从全局导航钩子中处理并存储数据到Vuex。接着，讲解了创建tagsview.js文件并在store中注册，以及在getter.js中引用的步骤。最后，展示了在Vue页面中如何渲染Tag标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

权限写完了，开始写主页面，如下

主要由侧边栏，头部，tag标签和主页面构成。

主要介绍tag标签。

a 侧边栏：

引用element-ui框架，从全局导航钩子开始说起，当我们拉取完用户token后，需要拉取用户权限，我们需要对拉取来的用户权限做处理，判断是否为超管权限或者为该用户应展示的权限内容，将其存放到vuex中，当我们渲染的时候，在从vuex中获取数据。

b tag标签：

（1）在store/modules/下新建tagsview.js

const tagsView = {
  state: {
    visitedViews: [], //存放所有浏览过的且不重复的路由数据
    cachedViews: []
  },
  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,
        title: view.meta.title || 'no-name'
      })
      if (!view.meta.noCache) {
        state.cachedViews.push(view.name)
      }
    },
    DEL_VISITED_VIEWS: (state, view) =>