vue-router

实际上存在三种模式： 　　Hash: 使用URL的hash值来作为路由。支持所有浏览器。 　　History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 　　Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。 Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

(转自) https://www.cnblogs.com/zifayin/p/8312677.html 1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下，初次进入会执行钩子函数，再次进入时则不会。 　解决方案： 监听路由变化 watch : { "$route" (to, from) { if(to.path.indexOf('/home') > -1) { this.initData() } } } 2.setInterval路由跳转继续运行并没有及时进行销毁 　 比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。 　解决方案：在组件生命周期beforeDestroy停止setInterval beforeDestory() { clearInterval(this.timer); MessageBox.close() } 3.vue 滚动行为用法，进入路由需要滚动到浏览器底部、头部等等 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意

1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下，初次进入会执行钩子函数，再次进入时则不会。 　 解决方案： 监听路由变化 watch : { "$route" (to, from) { if (to.path.indexOf('/home') > -1 ) { this .initData() } } } 2.setInterval路由跳转继续运行并没有及时进行销毁 　 比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。 　 解决方案：在组件生命周期beforeDestroy停止setInterval beforeDestory() { clearInterval( this .timer); MessageBox.close() } 3.vue 滚动行为用法，进入路由需要滚动到浏览器底部、头部等等 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意：这个功能只在支持 history.pushState 的浏览器中可用。 解决方案：https:/

##前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候，使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开的端口 ##正文 开发环境中的跨域 首先，要确定后台服务的ip与端口 这里我的后台开的是 localhost:8081 npm run serve在 8080 端口 一般我们使用ajax请求的时候，会可以把url ip:port/api 写在ajax请求的url参数中 this.axios.get("localhost:8081"+ `/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`) 这样，这个请求就是从localhost:8080发向localhost:8081,端口不同这就遇到了跨域的问题 vue cli WebpackDevServer 解决跨域的方法是通过node开一个服务器进行代理。 前台发向后台服务器的请求，先发向node所开的服务，node服务器以相同的参数向真正的服务器进行请求，再把响应返回给前台。 禁止跨域是浏览器的安全策略限制 这里有两个误区 ✕ 动态请求就会有跨域的问题 ✔ 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境 2.✕ 跨域就是请求发不出去了

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持） 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。 因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。 使用场景 一般场景下，hash 和 history 都可以

一、 Vue项目打包发布apache报错： route ，配置一个覆盖所有的路由情况 1、需要修改router/index.js中new Router 配置，加一个base: '/htcm_front/', 它指定应用的基路径，该应用是服务于localhost/htcm_front路径下，所以必须加base配置，否则应用会展示404页面 2、需要修改config/index.js中build下的assetsPublicPath: '/htcm_front/'，如果用相对路径，chunk文件会报错找不到。 3、将项目打包发布到apache的/var/www/html/下的htcm_front目录（htcm_front是打包生成的目录） 后端配置例子（apache配置文件）: 4、修改httpd.conf文件，开启rewrite_module功能。 LoadModule rewrite_module libexec/apache2/mod_rewrite.so ，去掉前面的# 5 、找到AllowOverride None 的那行，把它改成 AllowOverride All ，来使 .htaccess 文件生效。 6 、在你的项目目录下，也就是我的front目录添加一个.htaccess文件。 Vim .htaccess #.htaccess 内容# <IfModule mod

博客地址： https://ainyi.com/69 三月来了，春天还会远吗、、 在这里，隆重宣布本博客告别 Vue 传统的 hash 路由，迎接好看而优雅的 history 路由~~ 映照官方说法 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面 export default new Router({ mode: 'history', routes: [...] )} 当使用 history 模式时，URL 就像正常的 url，例如 https://ainyi.com/about ，好看又优雅！ 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 https://ainyi.com/about 就会返回 404，因为后端没有 /about 相应的拦截器，自然 404 所以，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是 app 依赖的页面 后端实现

开发企业级移动端音乐App，拿下Vue.js高级知识点 一、声明 本项目来自于 黄轶 老师的慕课网教程 Vue 2.0高级实战 开发移动端音乐 WebAPP ,目的在学习交流，如果有冒犯相关的权益，还望告知。 二、简述 由于本人也是第一次写文章，才薄智浅，博众一笑。关于某课上的音乐项目《Chicken Music》本人也是十分感兴趣，这篇文章主要目的是在于让更多的同学学习到深层次的前端知识（有点等于没说~哈哈哈）。本人是十分尊重知识产权的，但是日益增长的物质文化需要（支付不起价格）同落后的社会生产之间（工资低）的矛盾。本人怀着共同学习，共同进步的原则会为大家持续更新，数据接口一旦崩溃、修改、超时，会为大家在第一时间修改。 三、效果 四、页面代码块 由于代码量太多只能展示部分关键代码，还望海涵。 五、项目演示地址 六、项目帮助 此项目代码量巨大一篇文章，三言两语，远远不能表述清楚。如有需要本人可在闲暇之余提供力所能及的帮助 WeChat:13751817115 。也可以通过私人电邮联系我: 13751817115@163.com 。 项目运用了: 1.Vue.js 的高级应用 - Vuex、嵌套路由、slot、mixin、code spliting 等技术 2.庞大的组件库 - 13个基础组件+15个业务组件 3.MVVM框架：Vue.js 4.状态管理：Vuex 5.前端路由

转载自：http://www.cnblogs.com/summer7310/p/6394379.html； 之前项目都是使用Angularjs，（注明此处主要讲Angularjs 1）在初步使用Vue.js后做一个简单的对比笔记。 首先从理论上简单说一下各自的特点，之后再用几个小的例子加以说明。 Angular 1，MVVM (Model-View)(View-model) 2，模块化（Module）控制器（Contoller）依赖注入： 3，双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面。 4，指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...) 5，服务Service($compile $filter $interval $timeout $http...) 6，路由(ng-Route原生路由),ui-router(路由组件) 7，Ajax封装($http) 其中双向数据绑定的实现使用了$scope变量的脏值检测，使用$scope.$watch（视图到模型），$scope.$apply(模型到视图)检测，内部调用的都是digest，当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大

安装教程网上一大把，可以自己搜索。记录下学习过程。 认识下Vue的目录结构，取自:https://www.cnblogs.com/dragonir/p/8711761.html vue 文件目录结构详解 vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含： 基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/打包工具：webpack、babel、node-sass 单元测试工具：karma、mocha、sinon-chai 本地服务器：express 目录结构 ├── README .md 项目介绍 ├── index .html 入口页面 ├── build 构建脚本目录 │ ├── build-server .js 运行本地构建服务器，可以访问构建后的页面 │ ├── build .js 生产环境构建脚本 │ ├── dev-client .js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新 │ ├── dev-server .js 运行本地开发服务器 │ ├── utils .js