随笔分类 - Vue企业开发实战
摘要：语法 router.push(location) 要导航到不同的 URL，则使用 router.push 方法。该方法会向 history 找添加一个新的记录，当用户单击浏览器的后退按钮时，回到之前的 URL。 说明 当单击＜router-link＞时，会在内部调用 router.push(...)
阅读全文
摘要：下面列出了常用的路由信息对象。 route.params 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就为空对象。 $route.query 一个 key/value
阅读全文
摘要：<router-link＞组件支持用户在具有路由功能的应用中单击导航。通过 to 属性可以指定目标地址，默认渲染成带有正确链接的＜a＞标签，通过配置 tag 属性可以生成别的标签。另外，当目标路由成功激活时，链接元素会自动设置一个表示激活的 css 类名。下面来看一下<router-link>语法。
阅读全文
摘要：在打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，就比较高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由组件的懒加载。 提示 异步纽件： 在大型应用中，可能需要将
阅读全文
摘要：项目应用通常都会有一个首页，默认首先打开的是首页，要跳转到哪个页面都可以设置路由路径发生跳转。有些时候也需要路由器定义全局的重定向规则，全局的重定向会在匹配当前路径之前执行。重定向也是通过 routes 配置来完成的，具体如示例 5 所示。示例 5 中 展示的是从“／a ” 重定向到“/b”。 示例
阅读全文
摘要：在 main.js 入口文件中启用该路由器。main.js 作为入口文件，使用 import 可以把所有要用到的包都导入到这里，然后在 Vue 项目中去运用它们。创建和挂载根实例，通过 router 配置参数注入路由，从而让整个应用都有路由功能，具体如示例 2 所示。 示例2 经过示例 2 的配置之
阅读全文
摘要：Vue.js 的介绍 Vue.js 的宫方文档中是这样介绍的：简单小巧的核心，渐进式的技术枝，足以应付任何规模的应用。 简单小巧指的是 Vue.js 压缩后仅有 17KB。渐进式（progressive）是指可以一步一步、阶段性地来使用 Vue.js，不必一开始就使用所有的技能点。 Vue.js 常
阅读全文
摘要：先建立一个路由器模块，主要用来配置和绑定相关信息。在 router 文件夹下的 index.js 文件中使用 new Router 命令创建一个路由，一个路由是一个对象，一条路由的实现需要三部分：name、path 和 component。name 是命名，path 是路径，component 是组
阅读全文
摘要：Vue.js官方提供了一套专用的路由工具库 Vue Router，其使用和配置都非常简单，而且代码清晰易懂，很容易上手。 提示 将单页面应用分割为功能合理的组件或者页面，路由起到一个非常重要的作用，它是连接单页面应用中各页面的链条。 项目使用支持 CommonJS 规范的模块化打包器 Webpack
阅读全文
摘要：前端路由更多使用在单页面应用（SPA）上，因为单页面应用基本上都是前后端分离的，后端自然不会给前端提供路由。 来看一下前端路由的优缺点。 前端路由的优点 从性能和用户体验的层面来看，后端路由每次访问一个新页面都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面
阅读全文
摘要：前端路由和后端路由在技术实现上不一样，但原理是一样的。在 HTML5 的 history API 出现之前，前端路由都通过 hash 来实现，hash 能够兼容低版本的浏览器。如果把上一节的 URI 例子用 hash 来实现的话，它的 URI 规则中需要带上“#”。 http://10.0.0.1/
阅读全文
摘要：假设有一台提供 Web 服务的服务器的网址是 10.0.0.1，该 Web 服务又提供了 3 个可供用户访问的页面，其页面 URI 分别是 ： http://10.0.0.1/ http://10.0.0.1/about http://10.0.0.1/concat 路径分别是／、／about、／c
阅读全文
摘要：从示例 34 可以看出，使用 import 命令时，用户需要知道所要加载的变量名或函数名，否则无法加载。 为了给用户提供方便，不用阅读文档就能加载模块，需要用到 export default 命令，为模块指定默认输出。使用方法如示例 35 所示 。 示例 35 // export-default.j
阅读全文
摘要：Promise 是异步编程的一种解决方案，比传统的解决方案一一回调函数和事件更合理、更强大。它由社区最早提出和实现，ES6 将其写进语言标准，统一了用法，原生提其了 Promise 对象 。 所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作〉的结果。从语
阅读全文
摘要：在使用 ES6 的模块化设计时最常遇到的问题就是如何导入、导出属性和方法，在创建或者使用对应的 js 文件时常用 export 命令导出对应的属性和方法、import 命令导入对应的属性和方法。 1. export 命令 一个模块就是一个独立的文件，文件内部的所有变量外部无法获取。如果希望外部能够读
阅读全文
摘要：JavaScript 一直没有模块（module）体系，因此无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来，这对开发大型的、复杂的项目形成了巨大障碍。 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommnonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES
阅读全文
摘要：1. size 属性 size 属性返回 Map 结构的成员总数。 示例26 const hzhMap = new Map ([ ['name', '黄子涵'], ['brother', '黄春钦'], ['mother', '陈兰英'] ]); console.log("hzhMap成员总数：")
阅读全文
摘要：Map 可以接受一个数组作为参数，该数组的成员是一个个表示键值对的数组。查看示例 25 了解如何创建 Map 。 示例25 const hzhMap = new Map ([ ['name', '黄子涵'], ['brother', '黄春钦'], ['mother', '陈兰英'] ]); con
阅读全文
摘要：JavaScript 的对象（Object）本质上是键值对的集合（Hash 结构），但是传统上只能使用字符串作为键，这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但其“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也
阅读全文
摘要：了解了 ES6 箭头函数的优点，也看到了箭头函数的一些不足。那么在什么场景下不适合使用箭头函数呢？ 1. 对象的方式 在对象的方法中不建议使用箭头函数，如果使用了会导致一些问题的产生，看下面这段代码。 示例23 const Hzh = { name: "黄子涵", age: '28', brothe
阅读全文
