vue-router提供的导航守卫主要是用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局，单个路由独享，或者组件级。路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）。

路由守卫的三个参数

1
2
3

to：要跳转到的目标路由
from：从当前哪个路由进行跳转
next：不做任何阻拦，直接通行

一、https的简单介绍

HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL（Secure Socket Layer）。

在前端Nginx运行环境中时候会有多个nginx服务，同时也包括了支持多个域名多个项目访问，随着工信部对备案要求的严格和不定期的筛查，会偶然查到其他不知名的域名绑定了自己的服务器上，或安装其他服务通过其他手段后默让服务器绑定了此域名，此时nginx就会自动去访问你服务器的默认前端服务，这样就很容易被工信部的工作人员查到，就通知你诊改，此时对nginx的域名配置管理就显得尤为的重要，轻则服务器上的服务停止，重则封服务器的IP。为此为大家讲明白其中的来龙去脉，方便大家在工作能够快速定位问题、解决问题。

前言

在前端使用ElementUI开发中，可能会遇到需要展示选择树状数据的表单组件，但是在ElementUI中，并没有提供能够处理树状数据选择的select选择框组件。在开发中遇到类似的问题，为此也作出了相关的方案总结，方便大家根据自己的使用场景去进行选择使用。主要是针对三种方案的总结，接下来给大家讲述一下！

前端seo的meta优化是在开发过程中必须考虑的一个因素，这一点相信很多从事seo优化的也是深有体会，对吸引网络用户流量也是非常重要的，本文将详细讲解前端seo的meta标签定义。

在做SEO优化的过程中，网页代码中的Meta标签可以说对网站的关键词排名有着举足轻重的地位，如果SEO人员能在Meta标签上进行了适合搜索引擎的撰写方式，可在很大程度地提升网站的排名，同时也有利于站点内容的收录，所以给每个网页加上Meta值就成为了SEO中必不可少的工作之一。

vue组件之间的通信有很多种方式，比如props、$emit、$ref、provide/inject、$parent/$children、$root、vuex、$attrs/$listeners等，是相对适用在各个场景下使用的。进入重点是讲EventBus（事件总线），这种方式既简单也方便、同时适用于各个应用场景，但是唯一要注意的是如果是多人团队开发一个项目的话，都使用这种方式需要注意重复覆盖问题。它允许两个子组件之间直接通讯，而不需要涉及父组件，由于中继方式比较简单，这里不做赘述，只讲EventBus方式。

在前端开发中，经常会开发大屏显示，一般甲方都需要兼容PC和大屏的全屏模式，这里的全屏模式是html里面的body完全全屏哦，需要隐藏浏览器页签、状态栏、地址栏等，这个时候就需要用户可以自己选择是否全屏展示了，本解决方案可以兼容各大浏览器内核。先自己在网上找一个按钮的两个状态：全屏模式、非全屏模式，在本文文末也提供了按钮素材，可直接下载即可。

在前端开发中，经常会复用一些变量和函数，比如一些常量、变量、公用的方法，用户信息等，避免每个单页面都要引入一些复用组件和方法
，这个时候就需要将他们设为全局了。

一、vue定义设置全局变量

1、定义专用模块来配置全局变量

定义一个专用模块来配置全局变量，然后通过export暴露出去，在需要的组件引入global.vue

众所周知，Google浏览器最小字体为12px，那如何实现更小的10px字体呢？在网页中，经常会有一些促销标签，设计师很喜欢把这些便签的颜色设计的很醒目而字体很小，当然我们不讨论这种设计在视觉上会产生什么效果，我们现在要讨论的是如何制作这种小字体。

字体大小限制在有些浏览器（Chrome）上需要做设置的，例如：Chrome默认最小字体大小为12px，小于12px的字体都显示12px大小，不过你可以设置最小到6px。当然对于普通的用户是不会对它进行设置的，所以需要一些技术手段来做这种小字体。下面是不同平台不同浏览器对字体大小的限制：

一、mixin是什么

@mixin是一种简化代码的方法，能够提高代码的重复使用率。

二、mixin的基本用法

mixin定义（使用@mixin定义）：

报错信息

504 Gateway Time-out
原因是程序执行时间过长，导致请求超时。

一般情况下我们搭建前端运行WEB环境时会采用Nginx比较多，使用Nginx作为Web服务器的时候，你或多或少都会遇到Nginx 502 bad gateway的错误，造成这种错误的原因有很多，下面我们来一一解析。
这样的错误提示问题502 Bad Gateway是指错误网关，无效网关；在互联网中表示一种网络错误。表现在WEB浏览器中给出的页面反馈。
含义：这通常并不意味着上游服务器已关闭（无响应网关/代理） ，而是上游服务器和网关/代理不同意的协议交换数据。鉴于互联网协议是相当清楚的，它往往意味着一个或两个机器已不正确或不完全编程。

实现原理：利用vue创造一个自定义指令，绑定到需要拖拽移动的el-dialog组件上，在自定义指令中处理弹窗拖拽。

1、在src的components文件夹下新建elDialog文件夹，elDialog文件夹下有：index.js、index.vue

index.vue文件代码：

在项目开发收尾的工作的时候，甲方验收的时候，甲方可能会提出一系列的修改需求，有的修改会涉及到全局的，比如需要修改elementUi中message组件的停留时间和样式，一个页面一个页面的去修改不太现实，所以就只能全局性的去修改elementUi的message组件了。

一、全局修改message内置参数

比如为了不遮挡内容，需要修改message的默认距离顶端的距离为offset: 100

一、Nginx具有较强的处理并发能力

为什么Nginx抗并发能力强？原因是使用了非阻塞、异步传输。

在前端服务去访问后端服务的时候，可能后端访问有多台服务器在运行，前端需要根据当前的服务器情况去自动选择访问后端的其中一台服务器的服务。此时我们就需要使用到NGINX的负载均衡技术实现，众所周知upstream主要是配置均衡池和调度方法，proxy_pass主要是配置代理服务器ip或服务器组的名字。
下面我们看一下具体的配置：

在UI的布局开发中，样式是至关重要的，尤其是在开发大屏项目的时候，每个细节都需要处理到位，最常见的就是滚动条这块的样式，如果使用默认的滚动条样式，就明显的不协调，也影响到整体界面的美观。下面就给vue页面中的table表格加一个滚动条，并修改样式，为示例给大家提供一下此类问题的解决方案，这里只是用常见的table举例的，修改颜色和样式，可以灵活运用到其他场景。

一、业务场景

在使用element-ui展示表格数据时，需要根据查询条件对数据进行搜索，此时需使用el-select，并且需要从服务端获取数据用el-option展示给用户选择，但是由于搜索条件使用的是业务的数据，所以数据量比较大，服务端返回的数据量达到了5000多条，还需要在下拉框中展示。

jenkins在配置连接Centos服务器的时候报错信息：jenkins.plugins.publish_over.BapPublisherException: Failed to connect and initialize SSH connection. Message: [Failed to connect SFTP channel. Message [java.io.IOException: inputstream is closed]]hi’xu

在vue中，使用watch来响应数据的变化，首先介绍一下，watch是一个对象，一定要当对象进行使用。对象则有key和value。

key：代表的是需要监控的东西，比如：路由的变化或者data中某个变量。
value：有三种：

1. 函数, 即当监控的key 发生变化是，需要执行的函数， 第一个参数是新值，第二个参数是旧值。