Vue Router 4与路由管理实战

news2024/10/6 22:28:45

title: Vue Router 4与路由管理实战
date: 2024/6/7
updated: 2024/6/7

excerpt:
这篇文章介绍了如何在Vue.js应用中利用Vue Router实现单页面应用的路由管理，包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法，旨在提升用户体验和应用加载效率

categories:

  • 前端开发

tags:

  • Vue Router
  • 单页面应用
  • 路由管理
  • 导航守卫
  • 路由懒加载
  • 代码分割
  • 动态路由

在这里插入图片描述

第1章 Vue Router简介

1.1 Vue Router的概念与作用

Vue Router 是 Vue.js 的官方路由管理器，它用于构建单页面应用程序（Single Page Application，SPA）。在单页面应用中，页面不会重新加载，而是通过异步请求来更新页面内容。Vue Router 允许我们通过定义路由规则来实现不同页面组件的切换，它提供了一种简洁的、声明式的路由方式，使得页面之间的导航变得简单直观。

Vue Router 的主要作用包括：

  • 维护应用的状态，即当前处于哪个路由。
  • 为应用提供路由视图，即显示当前路由对应的组件。
  • 管理路由之间的切换，包括页面跳转、数据加载等。
  • 提供路由守卫，用于在路由切换过程中执行代码，例如权限验证、页面访问日志记录等。

1.2 Vue Router的发展历程

Vue Router 的发展可以分为几个阶段：

  • 早期版本：Vue Router 最初是作为 Vue.js 的一个插件出现的，它为 Vue.js 提供了路由功能。
  • Vue Router 2.x：随着 Vue.js 的发展，Vue Router 也在 2016 年发布了 2.0 版本，这个版本支持 Vue 2.x，并引入了许多新特性和改进。
  • Vue Router 3.x：在 Vue 3 发布之前，Vue Router 3.x 版本进行了大量的优化和改进，包括更好的类型支持、异步组件等。
  • Vue Router 4：随着 Vue 3 的发布，Vue Router 4 也随之而来，它完全兼容 Vue 3，并带来了一些重要的新特性和性能优化。cmdragon’s Blog

1.3 Vue Router 4的新特性

Vue Router 4 带来了以下新特性：

  • 兼容 Vue 3：Vue Router 4 专为 Vue 3 设计，与 Vue 3 的组合式 API 完全兼容。
  • 更简洁的 API：Vue Router 4 简化了一些 API，使得路由的配置和使用更加直观。
  • 更好的类型支持：Vue Router 4 提供了更好的 TypeScript 支持，使得类型检查更加严格和可靠。
  • 嵌套路由的改进：Vue Router 4 对嵌套路由进行了优化，使得嵌套路由的配置更加灵活。
  • 路由懒加载：Vue Router 4 支持路由懒加载，有助于提高应用的加载速度和性能。
  • 更强大的路由守卫：Vue Router 4 提供了更细粒度的路由守卫，使得路由控制更加灵活。

第2章 Vue Router 4的安装与配置

2.1 环境搭建

在开始使用 Vue Router 4 之前，需要确保已经安装了 Node.js 和 npm。然后可以使用 Vue CLI 来创建一个新的 Vue 3 项目，Vue CLI 会自动安装 Vue Router 4。

npm install -g @vue/cli
vue create my-vue-router-project

2.2 安装Vue Router 4

在创建好的项目中，可以使用 npm 或 yarn 来安装 Vue Router 4。

npm install vue-router@4
# 或者
yarn add vue-router@4

2.3 配置路由表

在 Vue 3 项目中，通常会在 src/router 目录下创建一个 index.js 文件来配置路由表。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2.4 路由的懒加载

路由懒加载可以帮助我们将不同路由对应的组件分割成不同的代码块，从而提高应用的加载速度。在 Vue Router 4 中，可以使用动态导入（Dynamic Imports）来实现路由的懒加载。
AD：等你探索

const routes = [
  { 
    path: '/', 
    component: () => import('../views/Home.vue')
  },
  { 
    path: '/about', 
    component: () => import('../views/About.vue')
  }
];

第3章 路由的基本使用

3.1 定义路由

定义路由就是创建一个路由表，它由一组路由规则组成，每个规则都定义了一个路径和对应的组件。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

3.2 路由的跳转与导航

使用 <router-link> 组件进行声明式导航：

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
</template>

使用 router.push 方法进行编程式导航：

// 在 Vue 组件的 methods 中
methods: {
  navigateToAbout() {
    this.$router.push('/about');
  }
}

3.3 动态路由匹配

动态路由允许我们在路由路径中定义参数部分，从而使得一个路由可以匹配多个路径。动态片段用 : 来标识。

const routes = [
  // 动态路径参数以冒号 `:` 开头
  { path: '/user/:userId', component: User }
];

在组件中可以通过 $route.params 访问这些参数：

export default {
  computed: {
    userId() {
      return this.$route.params.userId;
    }
  }
}

3.4 路由的嵌套

Vue Router 允许我们嵌套路由，这意味着你可以在路由中定义路由，实现组件的嵌套显示。

const routes = [
  {
    path: '/user/:userId',
    component: User,
    children: [
      // 当 /user/:userId 匹配成功后，会渲染 User 组件，
      // User 组件内部会渲染嵌套的 <router-view>，显示 UserPosts
      {
        path: 'posts',
        component: UserPosts
      },
      // ...其他子路由
    ]
  }
];

在 User 组件内部，你可以使用 <router-view> 来显示子路由匹配到的组件：

<template>
  <div>
    <h2>User {{ userId }}</h2>
    <router-view></router-view> <!-- 子路由匹配到的组件将在这里渲染 -->
  </div>
</template>

第4章 路由的导航守卫

4.1 导航守卫的概念

导航守卫是 Vue Router 提供的一种机制，用于在路由发生改变时执行一些逻辑，如权限验证、日志记录等。导航守卫可以控制路由是否允许跳转，以及在跳转前后执行特定的操作。
AD：享受无干扰的沉浸式阅读之旅

4.2 全局守卫

全局守卫作用于整个应用的所有路由。Vue Router 提供了三种全局守卫：

  • router.beforeEach：全局前置守卫，在路由切换前被调用。
  • router.beforeResolve：全局解析守卫，在导航被确认前，所有组件内守卫和异步路由组件被解析之后调用。
  • router.afterEach：全局后置守卫，在路由切换后被调用。
// 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
  // to 和 from 都是路由信息对象
  // next 是一个函数，必须调用它来 resolve 这个钩子
  next(); // 确保一定要调用 next()
});

4.3 路由独享守卫

路由独享守卫是在路由配置上直接定义的守卫，只作用于当前路由或嵌套路由。

const routes = [
  {
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from, next) => {
      // 在进入路由前执行的逻辑
      next();
    }
  }
];

4.4 组件内守卫

组件内守卫是在组件内部定义的守卫，包括：

  • beforeRouteEnter：在路由进入前调用，此时组件实例还未创建。
  • beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。
  • beforeRouteLeave：在离开当前路由时调用。
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于 /foo/bar 路由来说，当 /foo/baz 导航时，
    // 由于两个路由都渲染同一个 Foo 组件，因此这个守卫会被调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
  }
}

第5章 路由的懒加载与代码分割

5.1 路由懒加载的概念

路由懒加载是一种优化技术，它允许我们在需要时才加载路由对应的组件，而不是在应用初始化时就加载所有组件。这可以减少初始加载时间，提高应用性能。
AD：覆盖广泛主题工具可供使用

5.2 使用 import 语句实现懒加载

const Foo = () => import('./Foo.vue');

const routes = [
  { path: '/foo', component: Foo }
];

5.3 使用动态 import 语法实现懒加载

const routes = [
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: "group-bar" */ './Bar.vue')
  }
];

5.4 代码分割与优化

代码分割是一种将代码库分割成小块的技术，这些小块可以在需要时按需加载。这通常通过 Webpack 等打包工具实现，可以显著提高应用的加载速度和性能。

第6章 路由的参数传递与数据获取

6.1 路由参数的传递方式

路由参数可以通过路由路径、查询参数或路由元信息传递。

6.2 路由的 query 参数

查询参数是通过 URL 的查询字符串传递的参数，可以通过 $route.query 访问。

const routes = [
  { path: '/search', component: Search }
];

在组件中访问：

export default {
  computed: {
    query() {
      return this.$route.query;
    }
  }
}

6.3 路由的 params 参数

路径参数是通过路由路径中的动态片段传递的参数，可以通过 $route.params 访问。

const routes = [
  { path: '/user/:id', component: User }
];

在组件中访问：

export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}

6.4 路由的 meta 字段

路由元信息是在路由配置中定义的额外信息，可以通过 $route.meta 访问。

const routes = [
  {
    path: '/foo',
    component: Foo,
    meta: { requiresAuth: true }
  }
];

在守卫中访问：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

6.5 数据获取与路由守卫的结合

在路由守卫中，我们可以结合数据获取逻辑，确保在路由切换前获取到必要的数据。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前获取数据
    fetchData().then(() => {
      next();
    });
  }
}

以上是 Vue Router 高级部分的内容概述，涵盖了导航守卫、路由懒加载、代码分割以及参数传递和数据获取等高级主题。这些内容对于构建复杂、高性能的单页面应用至关重要。

第7章 Vue Router 4在项目中的应用

7.1 项目结构规划

在项目开始时，合理规划项目结构是非常重要的。通常，我们会将路由配置文件、组件、视图等分别放置在不同的目录中，以便于管理和维护。

/src
  /router
    index.js // 路由配置文件
  /views // 视图组件
    Home.vue
    About.vue
  /components // 可复用组件
    Header.vue
    Footer.vue
  App.vue
  main.js

7.2 路由配置与导航

在 index.js 中配置路由，并使用 <router-link> 和 <router-view> 进行导航和视图渲染。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

在 App.vue 中使用：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

7.3 路由守卫的应用

在项目中应用路由守卫，例如使用 beforeEach 进行权限验证。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

7.4 路由懒加载与代码分割

使用路由懒加载和代码分割提高应用性能。

const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ '@/views/About.vue');

第8章 基于角色的动态路由管理

8.1 动态路由的概念

动态路由允许我们根据用户的角色或权限动态地添加或移除路由。

8.2 用户角色与权限管理

在用户登录后，根据用户的角色或权限信息，动态配置路由。

8.3 动态添加路由

使用 router.addRoute 方法动态添加路由。

if (user.role === 'admin') {
  router.addRoute({
    path: '/admin',
    component: Admin,
    meta: { requiresAdmin: true }
  });
}

8.4 路由守卫与权限验证

结合路由守卫进行权限验证，确保用户只能访问其权限范围内的路由。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAdmin && !isAdmin) {
    next('/');
  } else {
    next();
  }
});

第9章 Vue Router 4与Vuex的结合

9.1 Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

9.2 Vuex与Vue Router 4的整合

在 Vuex 中存储路由状态，如当前路由信息、历史记录等。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentRoute: null
  },
  mutations: {
    setCurrentRoute(state, route) {
      state.currentRoute = route;
    }
  },
  actions: {
    updateRoute({ commit }, route) {
      commit('setCurrentRoute', route);
    }
  }
});

9.3 使用Vuex管理路由状态

在路由守卫中更新 Vuex 状态。

router.beforeEach((to, from, next) => {
  store.dispatch('updateRoute', to);
  next();
});

9.4 实现路由的面包屑导航

使用 Vuex 存储的路由状态实现面包屑导航。

<template>
  <div>
    <router-link v-for="route in breadcrumbs" :key="route.path" :to="route.path">
      {{ route.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      const currentRoute = this.$store.state.currentRoute;
      // 根据当前路由生成面包屑
      // ...
    }
  }
}
</script>

以上内容涵盖了 Vue Router 4 在实际项目中的应用，包括项目结构规划、路由配置、路由守卫、动态路由管理以及与 Vuex 的结合。这些知识点对于构建复杂的前端应用至关重要。

**附录

A Vue Router 4 API参考**

Vue Router 4 提供了丰富的 API 用于路由管理。以下是一些核心 API 的简要参考：

  1. createRouter: 创建并返回一个路由器实例。
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // 路由配置数组
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
  1. router.beforeEach: 全局前置守卫。
router.beforeEach((to, from, next) => {
  // ...
});
  1. router.addRoute: 动态添加路由。
router.addRoute({
  path: '/new-route',
  component: NewRouteComponent,
});
  1. router.replace: 替换当前路由。
router.replace('/new-route');
  1. router.push: 导航到一个新的路由。
router.push('/new-route');
  1. router.go: 在历史记录中前进或后退。
router.go(-1); // 后退一步
router.go(1); // 前进一步
  1. router.currentRoute: 当前路由信息。
console.log(router.currentRoute.value); // 当前路由对象
  1. router.resolve: 解析路由记录。
const resolvedRoute = router.resolve('/path');
  1. router.addRoutes: 动态添加多个路由。
router.addRoutes([
  // 路由配置数组
]);

更多 API 请参考 Vue Router 4 的官方文档。

B Vue Router 4常见问题解答**

以下是一些 Vue Router 4 使用过程中常见的问题及解答：

  1. 如何在 Vue Router 4 中进行路由懒加载？

使用动态导入语法 (import()) 实现路由组件的懒加载。

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
  1. 如何在 Vue Router 4 中使用路由守卫？

可以在路由配置中使用 beforeEnter 守卫，或者在全局范围内使用 router.beforeEach。

  1. 如何动态添加路由？

使用 router.addRoute 方法动态添加路由。

  1. 如何在 Vue Router 4 中获取当前路由？

通过 router.currentRoute 获取当前路由信息。

  1. 如何在 Vue Router 4 中进行路由导航？

使用 router.push 或 router.replace 进行路由导航。

C Vue Router 4版本更新日志**

Vue Router 4 的版本更新日志记录了每个版本的更新内容、新特性、改进和修复的 bug。以下是一些主要的更新内容：

  • 4.0.0: Vue Router 4 的初始版本，与 Vue 3 兼容，引入了新的 API 和改进。
  • 4.0.1: 修复了一些在 4.0.0 中引入的 bug。
  • 4.x.x: 随后的版本继续修复 bug、改进性能和增加新的功能。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

钉钉二次开发-企业内部系统集成官方OA审批流程

钉钉二次开发-企业内部系统集成官方OA审批流程

场景&#xff1a;企业内部开发人员不足&#xff0c;需要从以前集成Activiti的方式转换成集成钉钉官方OA审批流程&#xff0c;提高开发效率和系统稳定性。 摘要&#xff1a;企业内部系统集成Acitiviti开源工作流存在的问题&#xff1a; 1. 企业需要单独搭建工作流服务&#xff…
阅读更多...
玩转ChatGPT：最全学术论文提示词分享【上】

玩转ChatGPT：最全学术论文提示词分享【上】

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 在当今数字时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正迅速改变各行各业的运作方式。特别是&#xff0c;OpenAI的ChatGPT等语言模型以其强大的文本生成能力&#xff0c;…
阅读更多...
大数据相关知识||电商大数据相关参数和返回||主流电商平台大数据采集

大数据相关知识||电商大数据相关参数和返回||主流电商平台大数据采集

主流电商大数据&#xff1a; 公共参数 名称类型必须描述keyString是调用key&#xff08;免费测试&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,item_get,item_search_shop等]cacheString否[yes,no]默…
阅读更多...
jupyter notebook默认工作目录修改

jupyter notebook默认工作目录修改

jupyter notebook默认工作目录修改 1、问题2、如何修改jupyter notebook默认工作目录 1、问题 anaconda安装好之后&#xff0c;我们启动jupyter notebook会发现其默认工作目录是在C盘&#xff0c;将工作目录放在C盘会让C盘很快被撑爆&#xff0c;我们应该将jupyter notebook默…
阅读更多...
【NoSQL】Redis练习

【NoSQL】Redis练习

1、redis的编译安装 systemctl stop firewalld systemctl disable firewalld setenforce 0 yum install -y gcc gcc-c make wget cd /opt wget https://download.redis.io/releases/redis-5.0.7.tar.gz tar zxvf redis-5.0.7.tar.gz -C /opt/cd /opt/redis-5.0.7/ # 编译 make…
阅读更多...
【Spring Cloud Alibaba】开源组件Sentinel

【Spring Cloud Alibaba】开源组件Sentinel

目录 什么是Sentinel发展历史与Hystrix的异同 Sentinel可以做什么&#xff1f;Sentinel的功能Sentinel的开源生态Sentinel的用户安装Sentinel控制台预备环境准备Sentinel 分为两个部分:下载地址 项目集成Sentinel创建项目修改依赖信息添加启动注解添加配置信息在控制器类中新增…
阅读更多...
大数据开发统计数据的详细口径是什么

大数据开发统计数据的详细口径是什么

在进行开发数据需求之前&#xff0c;我们先要明确数据统计的详细口径是什么。 需求1&#xff1a;&#xff08;不明确的示例&#xff09; 统计商品的销售数量。 存在的问题&#xff1a; 这个需求表述过于简单&#xff0c;未明确指出统计商品销售数量的时间范围、商品类型等关键…
阅读更多...
《十八岁出门远行》世界很小，案牍劳形；世界很大，日短心长

《十八岁出门远行》世界很小，案牍劳形；世界很大，日短心长

《十八岁出门远行》世界很小&#xff0c;案牍劳形&#xff1b;世界很大&#xff0c;日短心长 余华&#xff0c;作家&#xff0c;著有《在细雨中呼喊》《活着》《文城》《兄弟》等。 文章目录 《十八岁出门远行》世界很小&#xff0c;案牍劳形&#xff1b;世界很大&#xff0c;日…
阅读更多...
SOA的参考架构

SOA的参考架构

1. 以服务为中心的企业集成架构 IBM的Websphere业务集成参考架构&#xff08;如图1所示&#xff0c;以下称参考架构&#xff09;是典型的以服务为中心的企业集成架构。 图1 IBM WebSphere业务集成参考架构 以服务为中心的企业集成采用“关注点分离&#xff08;Separation of Co…
阅读更多...
Redisson分布式锁原理解析

Redisson分布式锁原理解析

前言 首先Redis执行命令是单线程的&#xff0c;所以可以利用Redis实现分布式锁&#xff0c;而对于Redis单线程的问题&#xff0c;是其线程模型的问题&#xff0c;本篇重点是对目前流行的工具Redisson怎么去实现的分布式锁进行深入理解&#xff1b;开始之前&#xff0c;我们可以…
阅读更多...
正宇软件助力江西数字人大建设，高效解决群众“急难愁盼”问题

正宇软件助力江西数字人大建设，高效解决群众“急难愁盼”问题

近日&#xff0c;赣州市南康区群众通过“江西数字人大”小程序成功解决道路塌陷等民生问题&#xff0c;引发社会广泛关注。这一成功案例不仅彰显了“数字人大”在解决群众“急难愁盼”问题中的重要作用&#xff0c;也凸显了江西地区近年来在数字化人大建设方面的显著成效。正宇…
阅读更多...
【高频】什么是索引的下推和覆盖

【高频】什么是索引的下推和覆盖

面试回答&#xff1a; 索引的下推是指数据库引擎在执行查询时&#xff0c;将过滤条件尽可能地应用到索引上&#xff0c;以减少需要检索的数据量&#xff0c;从而提高查询性能。这样可以减少数据库引擎从磁盘加载的数据量&#xff0c;提高查询效率。覆盖索引是指一个索引包含了…
阅读更多...
uniapp余额银行卡支付密码界面实现(直接复制)

uniapp余额银行卡支付密码界面实现(直接复制)

示例&#xff1a; 插件地址&#xff1a;自定义数字/身份证/密码输入框&#xff0c;键盘密码框可分离使 - DCloud 插件市场 1.下载插件并导入HBuilderX&#xff0c;找到文件夹&#xff0c;copy number-keyboard.vue一份为number-keyboard2.vue&#xff08;number-keyboard.vue是…
阅读更多...
Android 高德地图API（新版）

Android 高德地图API（新版）

新版高德地图 前言正文一、创建应用① 获取PackageName② 获取调试版安全码SHA1③ 获取发布版安全码SHA1 二、配置项目① 导入SDK② 配置AndroidManifest.xml 三、获取当前定位信息① ViewBinding使用和导包② 隐私合规设置③ 权限请求④ 初始化定位⑤ 获取定位信息 四、显示地…
阅读更多...
ChatGPT-4o在临床医学日常工作、数据分析与可视化、机器学习建模中的技术

ChatGPT-4o在临床医学日常工作、数据分析与可视化、机器学习建模中的技术

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT-3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年11月7日&#xff0c;OpenAI首届开发者大会被称为“科技界的春晚”&#xff0c;吸引了全球广大…
阅读更多...
Web 网页性能优化

Web 网页性能优化

Web 网页性能及性能优化 一、Web 性能 Web 性能是 Web 开发的一个重要方面&#xff0c;侧重于网页加载速度以及对用户输入的响应速度 通过优化网站来改善性能&#xff0c;可以在为用户提供更好的体验 网页性能既广泛又非常深入 1. 为什么性能这么重要&#xff1f; 1. 性能…
阅读更多...
研发效能DevOps: Ubuntu 部署 JFrog 制品库

研发效能DevOps: Ubuntu 部署 JFrog 制品库

目录 一、实验 1.环境 2.Ubuntu 部署 JFrog 制品库 3.Ubuntu 部署 postgresql数据库 4.Ubuntu 部署 Xray 5. 使用JFrog 增删项目 二、问题 1.Ubuntu 如何通过apt方式部署 JFrog 制品库 2.Ubuntu 如何通过docker方式部署 JFrog 制品库 3.安装jdk报错 4.安装JFrog Ar…
阅读更多...
九种mfc140u.dll丢失的解决方法，全面解决mfc140u.dll文件丢失

九种mfc140u.dll丢失的解决方法，全面解决mfc140u.dll文件丢失

mfc140u.dll是 Microsoft Visual C 2015 Redistributable 的一部分&#xff0c;它与 Microsoft 基础类库&#xff08;MFC&#xff09;的 Unicode 版本有关。当您在运行使用 Visual C 2015 开发的应用程序时&#xff0c;可能会碰到关于mfc140u.dll丢失的错误。下面列出了一些解决…
阅读更多...
黑龙江等保测评流程

黑龙江等保测评流程

黑龙江的等保测评过程是一个系统严谨的过程&#xff0c;目的在于保证信息系统的安全与机密性符合国家规定的要求。下面将详细介绍黑龙江等保测评的流程&#xff1a; 一、定级与备案 首先&#xff0c;企业要依据自身的业务特点、信息系统的重要性和所承载的信息的敏感程度&…
阅读更多...
React - 实现走马灯组件

React - 实现走马灯组件

一、实现效果 二、源码分析 import {useRef, useState} from "react";export const Carousel () > {const images [{id: 3, url: https://sslstage3.sephorastatic.cn/products/2/4/6/8/1/6/1_n_new03504_100x100.jpg}, {id: 1, url: https://sslstage2.sephor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023