其他答案：1、官方Vue不建议直接操纵DOM。 Vue的目的在于绑定视图和数据。如果通过JQuery直接操作DOM，将不可避免地导致视图数据与模型数据之间的不匹配，从而使Vue失去其含义；

2、合理使用JQuery和vuejs不会引起冲突，因为它们具有不同的重点。 VueJS专注于数据绑定和视图组件，而JQuery专注于异步请求和动画效果。如果使用JQuery + VueJS进行开发，则必须在Vue呈现它们后使用JQuery处理所有HTML组件。使用JQuery时，应避免直接操作DOM，但允许应用程序动画；

3、JQuery和VueJS可以相互协作以非常高效地完成异步任务。首先，通过JQuery发出Ajax请求，接收到服务器传递的JSON数据后，通过Vue将数据绑定到组件，最后由JQuery进行动画处理，整个过程自然流畅。

4、题外话，Vue的目的不是取代JQuery，而是解决前端与后端的分离。如果没有数据更改，仅是样式的纯粹更改，就不需要费劲地绑定视图模型，而且不利于SEO优化。

vuejsSEO优化：如何用VUE SEO开发的项目中解决问题是百度所知的

全部展开使用Vue，js加载背景数据并为元素动态分配值。搜索引擎只能获取html内容，而不能执行JS，因此搜索引擎无法获取数据。解决方案：1、使用CDN缓存静态文件； 2、使用服务器为SEO部分动态分配值; 3、prerender-spa-plugin预呈现插件...

vuejsSEO优化：vue.js开发能否提高效率？百度知道

展开全部所有前端框架都是为了提高开发效率而创建的，Vue当然也不例外。可以用几行代码来解决本机方法中数十行代码，合理使用框架的问题，并且大多数框架封装了跨浏览器兼容的方法，这将使开发非常高效。 Vue创建的核心是易于使用，灵活且紧凑，...

vuejsSEO优化：Vue路由器初学者入门指南

学习了vue.js和vuex之后，我们剩下了vue系列存储桶中需要学习的最后一个组件。这是vue-router。在本文中，让我们了解和开始使用vue-router。为什么我们才刚刚开始？因为在这里我不会清楚地解释正式文件中的每个细节。如果您需要精通，还需要阅读官方文档并进行练习。

它是vue.js下的路由组件。

路由器，或“路由”。路由是网络项目中的一个术语。 James F.Kurose，Keith W. Ross。陈明译。在“计算机网络”中提到过

路由是指确定从数据包的源到目标的端到端路径的网络范围的过程

在WEB开发领域，路由实际上是指控制我们在浏览器中输入的URL应该进入哪个页面的组件。

在最原始的ASP和传统开发中，我们在浏览器路径中输入URL，服务器上的WEB服务器程序（例如Apache httpd）将自动更新此URL，并在WEB目录中找到对应的URL。通过一些解析器将在服务器端脚本执行后返回的HTML内容通过文件发送回浏览器，然后浏览器将呈现接收到的HTML。此时，WEB服务器程序（例如Apache httpd）本身就完成了路由功能。

例如，wordpress的后端是

直接请求相应的php脚本，并在执行脚本后将HTML返回到浏览器进行渲染。

但是现在开发了越来越流行的框架。许多PHP项目都是使用框架开发的。框架遵循单一输入原则，即，WEB目录中只有一个index.php文件和一些静态资源文件，而其他所有内容框架本身的业务逻辑和代码都写在WEB之外的各种文件中目录。所有入站请求均到达条目文件。入口文件使用请求的各种参数来确定应将哪些请求分发到WEB目录之外。文件（控制器）执行。如果我们很幸运能够找到使用非常旧的php框架开发的网站并观察其内部连接，则各种URL可能看起来像这样

等等，这是框架通过条目文件接受模块，控制器，操作和其他参数，以确定请求应分配到哪个模块，哪个控制器以及哪个操作。这样，实现仅用一个文件即可处理数千个逻辑的方法非常神奇。

在当前的WEB2.0时代，信息共享是许多用户上网的主要操作。如果您的URL足够短且美观，则用户只需要输入URL即可访问相应的网页，而不用输入一堆非IT行业的用户，例如模块，控制器，操作等。同时，由于SEO（搜索引擎优化）和URL的优美性，路由诞生了。

路由可以进一步类似于

此类网址缩写为

这看起来更漂亮吗？

如果您要问这个问题，那么您一定没有经验过PHP的Laravel框架。

让我们看看Laravel输出hello world时使用xphrof进行性能测试的结果，并发现与路由相关的操作会占用大量执行时间。由此，我们还可以看到Laravel中强大的路由。

我之前说了很多话，但是我仍然没有谈论路由的优点是什么？为什么不使用各种WEB服务器附带的URL重写功能？

首先，URL重写只是与请求URL匹配的简单正则表达式，然后将请求转发到真实的URL路径以执行。在这里，从高内聚和低耦合的角度来看，URL重写将是一个Web程序业务。该逻辑分布在两个地方：WEB服务器程序和WEB程序。从Apache服务器程序切换到nginx时，我们需要修改配置文件，这会降低可移植性。另外，有时我们需要对一组URL执行一些特殊的操作。例如，所有后台操作请求都必须验证登录操作。在传统开发中，要么在每个后台操作脚本（控制器）Operation中编写一个验证，一个更高级的操作将包括一个验证脚本，但是还不够优雅。现在有了路由，您可以将与后台操作相关的一组URL划分为一组，然后绑定中间件（类似于Java中的过滤器和拦截器）

我谈到了路由的好处，但是它们都涉及后端路由。即，前端和后端没有分隔的项目中的布线。现在我们处于前端和后端分离项目中。路由的用途是什么，它可以带来什么好处？

让我们先来看看Zhihu客户

这是Zhihu Client的两页。

首先让我们看一下这个要求：

有一天，产品经理说他需要开发一个诸如SPA之类的SPA，需要在导航栏的底部固定一些按钮，单击后还需要在导航栏的顶部带有一个返回按钮。底部导航栏，中间部分的页面应跳到相应的功能页面，单击顶部的后退按钮后，您应该返回上一页。

如果是传统开发，您首先想到的是使用CSS显示来切换和显示不同的vue组件（组件）实现。

但是，我们看到Zhihu底部的“我的”按钮中存在逻辑。如果用户未登录，则将跳至登录页面，如果已登录，将显示相应的页面。如果使用传统开发，它将显得非常不雅致。

应考虑另一种情况。通常，访问SPA的用户是移动终端。移动终端要考虑的最重要的事情是加载速度，并且它不会为用户消耗太多的能量。然后，您需要让用户单击此按钮来加载该组件的相关代码以及该组件需要请求的数据，并最终呈现页面。

最后，URL应该漂亮漂亮，并且URL可以动态接受参数。例如，网易云音乐是一个非常典型的SPA项目，它使用后端路由并可以接受参数

为了满足这些需求，最适合在vue.js下使用vue-router。

1.前端路由（程序导航·GitBook）：就像本地APP一样，允许页面上的部分内容无需刷新即可跳转。

2.延迟加载（延迟加载·GitBook）：组合异步组件并触发已创建的编队挂钩上的ajax请求进行数据获取（数据获取·GitBook），可以最大程度地减少加载时间并减少流量消耗。

3.重定向（重定向和别名·GitBook）：它可以实现一些需要根据特定逻辑更改页面原始路由的要求，例如，当未登录时访问“个人信息”时，应该重定向到登录页面。

4.美化URL（HTML5历史记录模式）：还记得网易云音乐的URL吗？

网易云音乐网络版的几乎所有URL均带有＃号。您可能想知道。 ＃号是URL的哈希部分，不会传递给服务器。那么＃号有什么作用呢？实际上，前端路由器使用URL的哈希部分来确定哪个前端组件需要处理某些请求，例如传统的后端路由器。

但是每个人都会认为URL中的＃号太丑陋了。是否可以是类似于传统WEB应用程序的URL。此时，vue-router提供的“ HTML5历史记录模式”“完美地”解决了这个问题。

为什么我们需要在引号前面加上引号？

请参考官方文件：

但是，要在此模式下正常运行，还需要后台配置支持。因为我们的应用程序是单页客户端应用程序，所以如果没有正确配置后台，则当用户在浏览器中直接访问它时，它将返回404，这是不好的。

因此，您需要添加一个涵盖服务器端所有情况的候选资源：如果URL与任何静态资源都不匹配，则应返回相同的index.html页面，这是您的应用程序所依赖的页面。

这里还有另一个主题，那就是为什么在前端路由时需要更改URL？如前所述，WEB2.0时代是信息共享的时代。如果用户切换到另一个页面，但URL仍显示index.html，则该用户希望将该页面共享给他的朋友，而他的朋友访问，您得到的只是该SPA的主页，而不是共享页面用户希望他的朋友看到。因此，当前端路由更改页面时，URL必须随之更改。同时，还解决了ajax历史导致浏览器后退前进按钮失败的问题。

5.术前操作，中间件，过滤器，拦截器（导航钩·GitBook）

后端路由中包含预操作，中间件，过滤器，拦截器和其他概念。前端路由也是可能的。 Vue路由器本身完美支持这些功能，使您可以像后端开发一样进行前端SPA开发。第三点中提到的用于重定向用户而不登录的判断逻辑可以写在这里。

6.路由元信息（路由元信息·GitBook）：路由规则可以在后端路由中进行分组，例如，所有需要登录才能访问的页面都被分为一个组。 Vue-router没有路由规则分组功能，但是提供了路由元信息。您可以在元信息中定义一些规则，然后在路由挂钩中判断这些规则并执行相应的操作。

7.滚动位置控制（滚动行为·GitBook）：与官方翻译的滚动行为相比，我更喜欢将其翻译为“滚动位置控制”。正式文件已经更容易地讨论了其功能。了解，您可以参考官方文档进行学习。

使用vue-router，您的前端SPA项目更像是一个可以投入生产环境并具有良好用户体验的项目。结合使用Vue.js + Webpack系列存储桶可以使您的前端开发效率和项目用户体验达到更高的水平。如果您需要了解有关vue-router的更多信息，欢迎阅读正式文档：简介·GitBook

本文最初由@昌维创作，首次发表在“智虎专栏”的“代码之美”一栏中，请注明转载来源。每个喜欢和支持我的文章的人都可以单击我的头像和列名来关注，或者单击下面的奖励按钮来获得支持，谢谢。 ^ _ ^

vuejsSEO优化：[良心推荐]您不会错过的Vue开发学习路线

2019年华丽开幕，您了解Vue，这是前端开发的必要技能吗？

想开始使用Vue但无法开始吗？

别担心，今天最实用的Vue学习路线

一站式学习路径将帮助您彻底学习Vue，

为您打开Vue开发上下文

初级，高级，高级

稳步前进，成为Vue的高级开发工程师。

俗话说，一口气就不胖。对于新手而言，学习Vue仍是分步进行的分阶段学习。今天，小牧不再谈论一些学习方法和技巧，而将直接谈论每个阶段要学习的内容。

别说话了，让我们来买干货吧！

第一阶段：Vue基本语法。我喜欢Vue的10个方面。它没有吹，没有发黑或撕裂。让我们谈谈VueVue.js的基本介绍。 Vue基本vue系列组件。 Vue.js功能介绍，组件的通用基础知识和语法vue手工教学Vue手工教学Vue路由器在环境构建中的基本用法[js框架] Vue框架一、的基础学习模板语法Vue系列基础文章Vue文档注释系列-基本vue知识要点摘要vue系列组件vue.js升级步进注释Vue2.0基本语法知识摘要Vue-cli 3. 0第一次体验！ Vue插件摘要-始终都有一个插件，您可以使用vue多语言插件vue-i18n入门阶段支持视频教程组合vue.js入门基础，总课程时长：1小时50分钟， 2章

教学目标：介绍vuejs的背景及其与项目相关的知识，vue项目的基本结构和开发方法，学习流行的前端项目构建方法webpack + gulp，并使用vue- cli脚手架工具。 Vue2.5 Qunar.com App的开发从零基础入门到实际项目，总课程时间：15小时，10章

教学目标：从Vue的基本语法开始，逐步进行，实际项目接近企业流程，并根据企业级代码质量和工程开发流程来教授课程，以便您可以了解该技术在企业中使用的真实过程。第二阶段：vue项目的实际战斗在项目中如何配置vue-loader？ Vue项目的实际旅程。踩坑的旅程。 Vue自定义说明，每个人都可以实施。 VUE开发组件-Vue分页组件VUE开发组件-Vue滑块两向双向滑块有限区域VUE开发组件-Vue列表列表滑动删除VUE开发组件-Vue H5城市选择控件30分钟学习使用VUE进行构建单页应用程序（SPA）30分钟学习使用VUE进行构建使用vue-cli3快速在单页应用程序（SPA）中构建vue项目的详细过程[快速入门] Vue.js购物车条目Vue时代高级文章：从0重构电子商务购物车模块，Vue感到饥饿。main.js项目使用vue家族存储桶构建vue-routerVue-cli 3.的反网易云播放器Vue2.0 0项目创建一个Vue.js项目，以管理每个页面的标题标签。Vue-如何使用导航防护来解释Vue2.0开发购物车示例。为什么Vue中的插槽无法应用v-show命令vue + vue-router + jquery。在传统模式下开发单页应用程序。借助axios拦截器在Vue.js中实现登录状态验证的想法是您不了解的Vue技能之一-开发可以被方法调用的组件。第二阶段配套课程组合：

Vue初步项目开发实战，课程时长：63小时，4门课程

教学目标：进行小型测试，学习使用Vue实施实际项目，在此阶段，您还可以学习全栈项目开发的过程

使用vue2.0实现购物车和地址匹配功能Vue.js2.5 + cube-ui重构Ele.me AppVue2.0 + Node.js + MongoDB全栈构建商城系统Vue2.5实战微信阅读与本地应用程序的企业级网络书店相当。第三阶段：高级：SSR技术使前端领导者教我如何入门。4）配置指南vue系列存储桶预渲染vue服务器端渲染vuejs预渲染插件prerender-spa-plugin生成多个页面-SEO vue服务器端渲染折腾使用动画vue粒子记录vue使用Nuxt.js创建的Vue.js应用程序的服务器端渲染[Vue CLI 3]从前端和后端分离开始的init源代码系列║初步探索SSR服务器渲染前端和后端分离的实践：基于vue的实现网站前端权限管理基础：面向源的研究Nuxt.jsEruda，移动调试工件，第三阶段支持课程组合：

Vue高级项目实战（复杂项目和SSR全栈开发），课程持续时间：37小时，两门课程

教学目标：真正的BAT公司Vue项目的开发过程绝不是Demo级的简单项目！绝对正品！带您学习大型工厂的完整开发过程以及复杂的Vue项目架构方法

Vue2.0企业级移动音乐Web APP的开发Vue系列Bucket + SSR + Koa2 Meituan.com的全栈开发阶段IV：Vue面试就业Vue常见面试问题vue新秀练习记录：未准备好采访中，这就是您在采访中需要准备的内容。讨论Vue数据双向绑定的原理。看看您的答案能给多少。您可以编写Vue双向数据绑定吗？ Vue项目框架的前端面试问题Vue实践Vue相关面试笔记的前端面试面试奖励项目Vue前端Vue面试问题公司需要使用框架Vue，将问哪些面试问题？ （摘要）让我们讨论源代码，学习每个人都可以理解的Vue源代码系列-Vue构造函数Vue.js中watch的高级用法Vue源代码分析：深度响应原理Vuex2.0源代码分析当更好的滚动遇到音乐音乐的Vuevue -cube-ui应用程序重构Didi开源Vue组件库-cube-ui的技术内部人员时，第四阶段支持课程组合：

Vue工程师的薪资很高，课程时长：37小时，两门课程

教学目标：通过对Vue源代码的全面深入的分析以及SSR的实现，在这里全面学习Vue，以帮助您在面试中脱颖而出！

Vue.js源代码全面深入地分析了Vue核心技术Vue + Vue-Router + Vuex + SSR的实用解释

以上是从新手到高级Vue工程师的实际路线。你准备好了吗？快来战斗〜