Vue 如何把computed里的逻辑提取出来

借用一下百度的ai

项目使用:

vue 文件引入

 <sidebar-item
        v-for="route in routes"
        :key="route.menuCode"
        :item="route"
        :base-path="route.path"
        @click="onColor"
      />

import { handleroutes } from "./handleroutes";

使用:
export default {
computed: {
    routes() {
      return handleroutes();
    },
  }
}

myComputedLogic.js

js文件里面 this.$store 不能用 就 import store from '@/store'; 引入后用store.getters

js文件里面this.$router 不能用 就 import router from '@/router'; 引入后用router.push()

import Vue from 'vue'
import store from '@/store';
import router from '@/router'

export function handleroutes() {
    let that = this;
    var obj = JSON.parse(store.getters.userInfo);
    let menuList = JSON.parse(store.getters.menuList);

    if (
      obj &&
      obj.roleTypes.includes(5) &&
      obj.sasSystem.systemDesc == "yn_web"
    ) {
      let menuList_item = menuList.filter(function (item, index) {
        return item.menuCode == "MONITOR";
      });
      menuList = menuList_item;
      let menuList_itemson = menuList_item[0].children.filter(function (
        item,
        index
      ) {
        return item.path == "clueInfo";
      });
      menuList[0].children = [];
      menuList[0].children.push(...menuList_itemson);
      router.push({ path: "/center/clueInfo" }).catch(err => err);
    }
    
    return menuList;
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/327700.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

分布式搜索引擎ElasticSearch——基础

分布式搜索引擎ElasticSearch——基础 文章目录 分布式搜索引擎ElasticSearch——基础初识elasticsearch什么是elasticsearchelasticsearch的发展正向索引和倒排索引安装elasticsearch&#xff0c;kibana部署单点es创建网络加载镜像运行 部署kibana部署DevTools 安装IK分词器在…

力扣白嫖日记(sql)

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 175.组合两个表 表&#xff1a;Courses 列名类型studentvarcharclassvarchar 在 SQL 中&#xff0c;(stude…

物流信息管理系统的设计与实现:从数据库到前端的全流程解析

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

CSS3中多列布局详解

多列布局 概念&#xff1a;在CSS3之前&#xff0c;想要设计类似报纸那样的多列布局&#xff0c;有两种方式可以实现&#xff1a;一种是"浮动布局"&#xff0c;另一种是“定位布局”。 这两种方式都有缺点&#xff1a;浮动布局比较灵活&#xff0c;但不容易控制&…

vue3__Provide / Inject (依赖注入)和mixins

一、 Provide提供和Inject 注入 Provide提供 <script setup> import { provide } from vueprovide(/* 注入名 */ message, /* 值 */ hello!) </script> 例如父组件中提供方法 <template> <div class"home">dfhualsf<div><button…

npm link 后怎么查看软连接和删除软连接的

一&#xff1a;在你的npm项目中&#xff0c;进行打包&#xff0c;形成一个dist文件 npm run build // 这是我的打包命令&#xff0c;具体可查看 package.json 文件 二&#xff1a; 打包完成后&#xff0c;运行pwd命令&#xff0c;可查看到你npm项目的路径。 pwd // 输出一…

FFMPEG解码实时流,支持cpu、gpu解码

官网下载的ffmpeg目前只能下载到X64版本的库&#xff0c;具体编译请参考windows编译ffmpeg源码&#xff08;32位库&#xff09;_windows 32位ffmpeg动态库-CSDN博客 直接上代码 int VideoDecodeModule::Open(std::string strUrl) {AVFormatContext *pFormatCtx nullptr;AVCo…

Next.js 开发指​南(GitHub 115k star​)

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架&#xff0c;它扩展了最新的 React 特性&#xff0c;集成了基于 Rust 的 JavaScript 工具&#xff0c;可以帮助你快速创建全栈 Web 应用 &#xff08;full-stack Web applications&#xff09; 。 对于有一定 React 基础…

虚拟机 以及 Centos 7的 安装全过程

目录 安装VMwere Workstion 虚拟机的操作过程 CentOS 7 安装过程 install CentOS 7 安装操作系统 安装VMwere Workstion 虚拟机的操作过程 更改安装位置 到下面图片中的这一个步骤&#xff0c;可以点击许可证&#xff0c;输入密钥就可以使用了&#xff0c; 密钥可以去某度或…

网络安全B模块(笔记详解)- 文件包含

文件包含的渗透与加固 1.使用渗透机场景kali中工具扫描服务器,将服务器上 File Inclusion首页概述页中的Flag提交; Flag:iloveu 2.使用渗透机场景windows7访问服务器场景网站中的File Inclusion(local)页面,找到根目录下Flag文件夹下的Flag.txt文件并将其内容提交; Flag:…

Linux中SSH远程管理服务

一、SSH服务 1.1.什么是SSH服务器&#xff1f; SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;主要用来实现字符界面的远程登录、远程 复制等功能。SSH 协议对通信双方的数据传输进行了加密处理&#xff0c;其中包括用户登录时输入的用户口令&#…

回环检测算法:Stable Trangle Descriptor

回环检测是指检测传感器的两次测量&#xff08;如图像、激光雷达扫描&#xff09;是否发生在同一场景&#xff0c;它是对于SLAM问题至关重要。基于激光雷达的回环检测应该满足如下要求&#xff1a; 无论视点如何变化&#xff0c;回环检测方法应该实现旋转和平移不变性&#xf…

从零开始:Golang中JSON解析与生成的完全指南

从零开始&#xff1a;Golang中JSON解析与生成的完全指南 引言Golang与JSON&#xff1a;基础概念JSON简介为何在Golang中使用JSON Golang中JSON数据的解析使用encoding/json解析JSON解析成基本数据类型解析成自定义结构体错误处理和常见问题 Golang中生成JSON数据将Golang对象转…

两数之和(Hash表)[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个整数数组nums和一个整数目标值target&#xff0c;请你在该数组中找出"和"为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元…

Elasticsearch 7.8.0从入门到精通

安装Elasticsearch 7.8.0 官网&#xff1a;Elasticsearch 7.8.0 | Elastic 大家下载所需要的安装包即可。然后解压缩&#xff1a; Elasticsearch是通过java编写的&#xff0c;所以自带jdk。多好&#xff0c;下载Elasticsearch赠送jdk 0.0&#xff0c;不过一般我们用自己的jdk…

java发送邮件(注:本章以163邮箱为例)

目录 前言 一邮件服务器与传输协议 二.发送邮件思路 2.1注册163邮箱: 2.2、打开邮箱服务获取授权码 三.代码实现邮件发送 3.1第三方jar包 3.2创建邮件工具类 3.3编写测试类 前言 电子邮件的应用非常广泛&#xff0c;例如在某网站注册了一个账户&#xff0c;自动发送一…

C#/WPF 设置和启动Windows屏保程序

前言 我们平时电脑启动的屏保程序其本质也是应用程序&#xff0c;只是后缀名为.scr。所以我们只需要把应用程序后缀改为.scr&#xff0c;然后右键选择安装即可启动我们自己的屏保程序。 屏保注册表参数 设置电脑屏保参数&#xff0c;在个性化设置>锁屏界面>屏幕保护程序设…

解决若依Vue3前后端分离---路由切换时显示白屏

解决若依Vue3前后端分离---路由切换时显示白屏 1.问题重述 解决基于Vue3若依前后端分离项目中出现的路由正常切换但是就是不显示数据的问题&#xff0c;也就是不发起网络请求的问题。 找到如下位置中AppMain.vue文件 将除了css中的代码进行替换成如下的代码。 <template&g…

element-ui表单验证同时用change与blur一起验证

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 当审批时不通过审批意见要必须输入&#xff0c; 1&#xff1a;如果用change验证的话删除所有内容时报错是massage的提示&#xff0c;但是在失去焦点的时候报错就成了英文&#xff0c;如下图&#xf…

K8S--Ingress的作用

原文网址&#xff1a;K8S--Ingress的作用-CSDN博客 简介 本文介绍K8S的Ingress的作用。 ----------------------------------------------------------------------------------------------- 分享Java真实高频面试题&#xff0c;吊打面试官&#xff1a; Java后端真实面试题…
最新文章