位置: IT常识 - 正文

Vite4 + Vue3 + vue-router4 动态路由

编辑:rootadmin
Vite4 + Vue3 + vue-router4 动态路由

推荐整理分享Vite4 + Vue3 + vue-router4 动态路由,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

动态路由,基本上每一个项目都能接触到这个东西,通俗一点就是我们的菜单是根据后端接口返回的数据进行动态生成的。表面上是对菜单的一个展现处理,其实内部就是对router的一个数据处理。当然你只对菜单做处理也是可以的,但是没有任何意义,熟悉router的小伙伴都知道,如果你的一个路由存在,即使没有这个菜单,我只要改变浏览器的地址一样能访问到。所以你还是省不了修改router的步骤。通过接口获取数据的话就可以根据角色权限或者一些业务上的需求,根据不同属性实现路由的划分。达到不同的页面渲染效果。

本文只是讲解菜单的权限控制,不到按钮级别。其实按钮也是差不多的。可以设置一个属性表示菜单,一个属性表示按钮,每一个菜单的叶子节点上都包含根据权限返回的按钮数组。接着可以通过组件的形式去输出相应的按钮就可以。

一、搭建项目 😛😛😛

这里我已经提前搭建好了 Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)

二、根据上面链接搭建好项目,修改src/router/index.ts 😁 😉Vite4 + Vue3 + vue-router4 动态路由

asyncRoutes里面可以存放默认的一些路由,比如登录、404、403这些。由于我只是演示,所以就啥都不放了。清晰明朗一点。

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'export const asyncRoutes: RouteRecordRaw[] = []const router = createRouter({ history: createWebHashHistory(), routes: asyncRoutes, scrollBehavior: () => ({ left: 0, top: 0 })})export default router三、创建 'src/layout/index.vue' 文件 😁 😉

这个文件就是整个项目的布局,一般我们常见的项目都分为上下结构,就如下图。导航和菜单部分基本上是用户登录以后就已经确定好了,点击菜单的时候去切换路由。我这里由于这部分不是重点,所以我就很潦草的画了一个很简单的页面。

<template> <div style="padding: 100px;"> <div> <div v-for="(item, index) in menus[0].children" :key="index" style="margin-bottom: 20px;"> <router-link :to="item.path">{{item.title}}</router-link> </div> </div> <div> <router-view #default="{route, Component}"> <transition leave-from-class="ts-web-fade--leave-to" enter-active-class="animate__animated animate__bounceInRight"> <component :is="Component"></component> </transition> </router-view> </div> </div></template><script lang="ts">import appStore from '@/pinia';export default defineComponent({ setup() { const { menus } = appStore.permissionModule console.log(menus, 'menus') return { menus, } }})</script>四、创建 'src/pinia/modules/permission.ts' 文件 😁 😉

由于我这里是一个demo,没有真正的去接入后端。所以我暂时放入的静态数据。自己替换成接口返回就好。

import { defineStore } from 'pinia';import router from '@/router'// 这是整个项目的布局页面。根据自己的项目替换就好import Layout from "@/layout/index.vue";import {RouteRecordRaw} from "vue-router";export type MenuType = { path: string, title: string, component: string, redirect?: string, children?: Array<MenuType>}type RouterType = RouteRecordRaw & { hidden?: boolean; alwaysShow?: boolean;}export interface IPermissionState { routes: RouterType[] dynamicRoutes: RouterType[] menus: Array<MenuType>}function hasPermission<T>(roles: T[], route: RouterType) { if (route.meta && route.meta.roles) { return roles.some((role) => (route.meta?.roles as T[]).includes(role)); } return true}const modules = import.meta.glob('../../views/**/*.vue')const _import = (path: string) => () => import(`../../views/${path}.vue`)const assembleRouter = (routers: any) => { const addRouter = routers.filter((router: any) => { (router.title && router.icon) && (router.meta = { title: router.title, // icon: router.icon, // alwaysShow: router.alwaysShow || false, // affix: router.affix || false, }) if (router.component === 'Layout') { router.component = shallowRef(Layout) } else { if (import.meta.env.MODE === 'development') { router.component = _import(router.component) } else { router.component = modules[`../../views/${router.component}.vue`] } } if (router.children && router.children.length) { router.children = assembleRouter(router.children) } return true }) return addRouter}export function filterAsyncRoutes(routes: RouterType[], roles: string[]) { const res: RouterType[] = [] routes.forEach((route) => { const tmp = { ...route } if (hasPermission<string>(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res}export const permissionModule = defineStore({ id: 'permission', state(): IPermissionState{ return { routes: [], dynamicRoutes: [], menus: [] } }, actions:{ async getMenus() { try { // 这里由于不方便演示,所以我写的静态数据。换着自己对于的接口就好 const list:MenuType[] = [ { path: '/', title: 'ts-super-web', component: 'Layout', redirect: '/home', children: [ { title: 'home', path: 'home', component: 'home' }, { title: 'home1', path: 'home1', component: 'home1' } ] } ] this.menus = list // 组件路由 let addRouter = assembleRouter(this.menus) // addRouter = assembleRouterDelete(addRouter) // 动态添加菜单 addRouter.forEach((ts: any) => { router.addRoute(ts) }) } catch (err) { return Promise.reject(err); } } }})五、路由拦截器 😁 😉 😜

因为上面说到我没有真正的接入后端,所以这里我也没有进行token判断。自行增加一下就好,比较简单。除了token还可以在拦截器里面放置一个白名单列表,对于白名单里面的路由我们不做拦截。比如login登录页面、404等等。根据自己需求配置就好。

import router from '@/router'// @ts-ignoreimport NProgress from 'nprogress'import 'nprogress/nprogress.css'import appStore from "@/pinia";NProgress.configure({ easing: 'ease', // 动画方式 showSpinner: true, // 是否显示加载ico trickleSpeed: 200, // 自动递增间隔 minimum: 0.4, // 更改启动时使用的最小百分比})router.beforeEach(async (to, form, next) => { // 这里处理自己的逻辑,比如需要登录以后才能访问其他页面等等 NProgress.start() const { menus, getMenus } = appStore.permissionModule if (menus.length === 0) { try { // 调用接口获取菜单 进行跳转 await getMenus() next({ ...to, replace: true }) } catch (err) { next() } } else { next() } NProgress.done()})六、修改app.vue<template> <router-view /></template><style>html,body,#app { height: 100%; width: 100%; margin: 0; padding: 0;}</style>七、src/views下的两个home文件进行一下修改

home 这两个文件不修改也不影响。

<template> <p style="font-size: 32px;">你好,我是home</p></template>

home1 这两个文件不修改也不影响。

<template> <p style="font-size: 32px;">你好,我是home1</p></template>八、效果浏览

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇
本文链接地址:https://www.jiuchutong.com/zhishi/298708.html 转载请保留说明!

上一篇:云化Web IDE,在线开发新模式(it云化)

下一篇:React基础-JSX语法列表渲染详解(react js 教程)

  • 差旅费抵税怎么算
  • 残保金退回属于什么业务
  • 被投资方宣告发放股票股利
  • 要约收购期满
  • 车间职工报销医药费能使用现金吗
  • 股票价值的计算公式财务管理
  • 单位风险金是什么意思
  • 出差补助没有发票计入什么科目
  • 物业公司需要向哪个部门缴费
  • 开出转账支票用什么凭证
  • 企业分期付款购车分录怎么写
  • 营改增各项业务销售额按照什么确定
  • 境外服务收入免税范围
  • 工程多少金额需要投标
  • 采用差额计税开什么发票
  • 实收资本记错账如何调整账面价值
  • 文化事业费征收
  • 税金及附加是否设二级科目
  • 开票金额与收入金额有差额可以吗
  • 怎么关闭电量低
  • 经费支出渠道
  • 增值税贷方余额为负数怎么调整
  • 收到股改代扣代缴税款
  • 单位办事人员
  • 房地产企业如何结转成本
  • regsvc32.exe - regsvc32是什么进程 有什么用
  • linux增加inode
  • 项目部可以直接给工人结账吗
  • 进程aissca.exe
  • 非货币资金包括哪些科目
  • php和apache
  • php扫二维码
  • framework在哪里打开
  • vue2.
  • 最新人工智能软件chingt
  • 虚拟机安装win11提示无法运行
  • 现金流量表和资产负债表的区别
  • 发生售后维修领用材料分录
  • 会计在建工程属于什么科目
  • 试生产期间发生事故后重新
  • 怎么样去掉
  • DEDECMSV5.6将软件下载次数直接生成静态
  • 纳税申报的流程如何?面试怎么说
  • 购入项目用仪器怎么做账
  • 债权投资产生的暂时性差异确认所得税吗
  • 车补贴是要缴纳增值税吗
  • 进项税大于销项税怎么做分录
  • 发票已经认证后怎么撤销
  • 政府补助的分类包括
  • 怎么计算土地增值税收入
  • 电子承兑背书了能撤回吗
  • 油卡预付卡发票能入费用吗怎么入账
  • 工程进度款如何做账
  • 小规模销售免税产品需要交税吗
  • 商业承兑汇票怎么接收
  • 交易性金融资产入账价值怎么计算
  • 资产折旧的计税基础
  • 其他应收款如何做坏账处理
  • 预缴的附加税月末结转吗
  • Fedora 21顶栏日期显示不全的解决方法
  • vb.net with
  • 主板各个系列详解
  • ubuntu浏览网页
  • win7无法登录qq
  • win7破解版和正版的区别
  • linux的文件结构
  • win8怎样设置将文件保存到d盘
  • window10 .net3.5
  • vsftpd的配置文件
  • 打地鼠android
  • shell脚本ping
  • angularjs删除数组元素
  • JavaScript ParseFloat()方法
  • ajax实现无刷新
  • 个人所得税申诉有什么后果
  • 公积金扣800一个月多少钱
  • 出口退税账户标识是否怎么选
  • 交完契税,房产证没办,契税能退吗
  • 2022年太原医保缴费时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设