Vue-Router(4) 学习之动态路由二-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue-Router(4) 学习之动态路由二。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 动态路由表 dynamic_routes


export const dynamic_routes = [
  {
    path: '/origin_setting',
    component: Layout,
    redirect: '/origin_setting/index',
    depthFlagArr: [0,1],
    name: 'MyOriginSetting',
    children: [
      {
        path: '/origin_setting/index',
        name: 'OriginSetting',
        meta: { title: '域名管理', icon: Setting },
        component: () => import('../views/OriginSetting/index.vue')
      }
    ]
  },
  {
    path: '/avatar-manage',
    component: Layout,
    redirect: '/avatar-manage/index',
    // depthFlagArr: [],
    show_ivl_menu: true,
    name: 'MyAvatarManage',
    children: [
      {
        path: '/avatar-manage/index',
        name: 'AvatarManage',
        meta: { title: '形象管理', icon: Avatar },
        component: () => import('../views/AvatarManage/index.vue')
      }
    ]
  }
];

说明：depthFlagArr，show_ivl_menu 是判断是否加载路由的标识

2. 路由控制 private_routes.ts

使用pinia作为全局store，控制包括路由权限、userinfo、token等动态信息

// private_routes.ts 路由控制
import { defineStore } from 'pinia'
import { computed } from 'vue';
import router from '@/router'

import { useAuthStore } from '@/store/user'
import { dynamic_routes } from '@/router/menuRoutes'
// 动态路由菜单
export const useDynamicMenuStore = defineStore('dynamicRouter', () => {
  const userStore = useAuthStore()
  const _id = computed(() => userStore.info._id)
  const depth = computed(() => userStore.info.depth)
  const show_ivl_menu = computed(() => userStore.info.show_ivl_menu)
  const menuRoutes = computed(() => {
    console.log(_id.value)
    if (!_id.value) return []
    // 使用computed根据role筛选对应路由
    return dynamic_routes.filter(route => {
      if (route.depthFlagArr && route.depthFlagArr.includes(depth.value))  {
        router.addRoute(route) // Add the route to 
        return true;
      } else if(route.show_ivl_menu && show_ivl_menu.value) {
        router.addRoute(route) // Add the route to 
        return true;
      }
    })
  })

  return { _id, menuRoutes }
});

3. 菜单栏

显示在左侧的导航栏

<template>
    <el-aside class="page-side">
      <el-scrollbar>
        <el-menu
          :router="true"
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="activePath"
          text-color="#fff"
        >
          <template v-for="item in routes" :key="item.path">
            <template v-if="item.children.length === 1">
              <el-menu-item :index="item.children[0].path">
                <el-icon>
                  <component :is="item.children[0].meta.icon" />
                </el-icon>
                <span>{{ item.children[0].meta.title }}</span>
              </el-menu-item>
            </template>

            <el-sub-menu v-if="item.children.length > 1" :index="item.path">
              <template #title>
                <el-icon><icon-menu /> </el-icon>
                {{ item.meta?.title }}
              </template>
              <el-menu-item
                v-for="child in item.children"
                :key="child.path"
                :index="child.path"
                >
                <el-icon><icon-menu /> </el-icon>
                {{ child.meta.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
</template>

<script setup lang="ts">
import { computed } from "vue";
// 从路由中获取菜单
import { private_routes } from "@/router/menuRoutes";
import { useDynamicMenuStore } from '@/store/private_routes';

import { Menu as IconMenu } from "@element-plus/icons-vue";
// 获取当前 路由的 path
import { useRoute } from "vue-router";
const route = useRoute();
// 获取当前 路由的 path
const activePath = computed(() => route.path);

const dynamicMeneStore = useDynamicMenuStore()
const menu = computed(() =>dynamicMeneStore.menuRoutes)

// 判断动态路由是否需要移除
const routes = computed(() => {
  return private_routes.concat(menu.value)
})
</script>

<style scoped>
.page-side {
  background: #545c64;
  display: flex;
  flex-wrap: wrap;
  width: 150px;
}

.el-menu {
  border-right: none;
}
.el-scrollbar {
  height: 100%;
  width: 100%;
}
</style>

4. 问题思考

4.1 动态路由刷新404

4.2 动态路由与userInfo的关系文章来源地址https://www.toymoban.com/news/detail-532129.html

到了这里，关于Vue-Router(4) 学习之动态路由二的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！