写在前面：通常 SPA 中前端路由有2种实现方式： window.historylocation.hash下面就来介绍下这两种方式具体怎么实现的一.history1.history基本介绍window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击按钮向前相同history.go(n) - 接受一个...
项目背景最近在项目开发中，遇到下面这样一个问题： 在进行铭感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。需求分析 每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是...
一、报错内容类似：Expected indentation of 0 spaces but found 4 将 build 文件下的 webpack.base.conf.js 文件里面的下面一段代码注释掉（eslint-loader内容）,重新运行.二、报错内容： Newline required at end of file but not found 只需要在 js css 等后面再加一行（空行）就可以了或者将 build 文件下的 webpack.base.conf.js 文件里面的下面一段代码注释掉（eslint-loader内容）,重新运行.三、修改默认端口号 不想使用默认...
前置条件:熟悉使用 Javascript + HTML5 + css3。 理解 ES2015 Module 模块(export、import、export-default)。 了解 nodejs 基础知识，npm 常用命令，以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。 了解 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。webpack 的使用...
在需要身份验证的前端应用里，我们经常想通过用户角色来决定哪些内容可见。比如，游客身份可以阅读文章，但注册用户或管理员才能看到编辑按钮。 在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码： if (user.type === ADMIN || user.auth && post.owner === user.id ) {... }作为代替方案，一个简洁轻量的库——CASL——可以让管理用户权限变得非常简单。只要你用CASL定义了权限，并设置了当前用户，就可以把上面的代码改...
申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，在Vue.js项目首先想到的可能就是，把统计代码插入到index.html入口文件中，这样就全局插入，每个页面就都有了;这样做就涉及到一个问题，Vue.js项目是单页应用，每次用户浏览网站时，访问内页时页面是不会刷新的，也就意味着不会触发百度统计代码；所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量，却无法统计到内页的访问流量。 解决方法在main.js文件中...
问题描述：Vue单页面用按F5强刷，数据就恢复初始了，这怎么破？ 解决方案： store.subscribe((mutation, state) => {sessionStorage.setItem(mobileState, JSON.stringify(state)); })if (sessionStorage.getItem(mobileState)) {state = JSON.parse(sessionStorage.getItem(mobileState));} else {state = stateOrg;}ps:下面看下Vue父组件接收不到子组件$emit事件的原因分析 通常有两种情况： 1.事件名称不全是小写。事件名称要求...
使用 vux UI组件库使用 vue-navigation 缓存页面，此库实现了前进刷新后退读缓存的功能，像原生APP导航一样。用子路由的方式实现tabbar有bug，用vuex解决了。使用 lib-flexible 解决移动页面适配来一个清单 "dependencies": {"fastclick": "^1.0.6","lib-flexible": "^0.3.2","lodash": "^4.17.4","vue": "^2.5.2","vue-navigation": "^1.1.3","vue-router": "^3.0.1","vuex": "^2.1.1","vuex-i18n": "^1.3.1","vux": "^2.7.8"}微信...
对于React，Vue构建的单页面应用老说，SEO是一个众所周知的问题。服务端渲染(SSR-server Side Render)是目前看来最好的解决办法。React应用有Next.js，对应Vue的解决方案就是Nuxt.js。1.简介 官网：https://nuxtjs.org/GitHub：https://github.com/nuxt/nuxt.js Nuxt.js 是什么？ Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵...
本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下： 修改的webpack配置文件全局配置修改 webpack.base.conf.js打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 运行、编译的时候每一个入口都会对应一个Chunk run dev 开发环境修改 webpack.dev.conf.js打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPl...
Vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。 Vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多...
本文实例为大家分享了Vue在购物车场景下的应用，供大家参考，具体内容如下 购物车场景需求： 1. 商品、店铺、购物车的选择 2. 商品删除 关键代码 测试数据 var _list = [{checked: false,goods: [{name: "商品1",price: 23,checked: false}] }, {checked: false,goods: [{name: "商品2",price: 20,checked: false}, {name: "商品3",price: 30,checked: false}] }]; 店铺对象组成购物车数组 _list 商品对象组成店铺对象下的商品数组...
一. 路由钩子语法 在vue-router的官方文档中, 将路由钩子翻译为导航守卫, 下面是文档中的内容摘要, 大家也可以通过传送门前往官网阅读详细内容路由钩子 路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的，靠。。好拗口啊。总体来讲vue里面提供了三大类钩子1、全局钩子 2、某个路由独享的钩子 3、组件内钩子三种路由钩子中都涉及到了三个参数，这里直接上官方介绍吧 to: Route: 即将要进入的目标 路由对象 from: ...
最近一直在研究使用vue做出来一些东西，但都是SPA的单页面应用，但实际工作中，单页面并不一定符合业务需求，所以这篇我就来说说怎么开发多页面的Vue应用，以及在这个过程会遇到的问题。 这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：multiple-vue-page 准备工作 在本地用vue-cli新建一个项目，这个步骤vue的官网上有，我就不再说了。 这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加...
本文介绍了新手vue构建单页面应用实例代码，分享给大家，具体如下 步骤： 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一、目录结构：二、搭建项目 先安装 vue-cli： sudo npm install -g vue-cli 使用vue-cli构建初始化项目：vue init webpack project（创建webpack项目并下载依赖） 输入命令进入项目： cd my-project...