requireJs简介参数配置requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。require define其中define是用于定义模块，而require是用于载入模块以及载入配置文件。 define([id,deps,] callback); require(deps[,callback]);加载配置文件独立的引入配置文件也有两种方式，一种是通过script标签加载外部JS文件形式： <script src="js/require.js"></script> <script src="js/app.js"></script>另一种方式则是使用 r...
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){console.log(event.oldURL, event.newURL);let hash = location.hash.slice(1);document.body.style.color = hash; }上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。 更关键的一...
问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view> </div> const router = new Router({scrollBehavior(to, from, savedPosition) {if (savedPosition && to.meta.keepAlive) {return savedPosition;}return { x: 0, y:0 };}, });2. 页面返回出...
背景旧项目改造，进行前后端分离。做成了spa，为了保证后端路由时期链接可用性，使用了history模式。因为不同的页面有不同的分享内容，所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑微信官方文档上有下面一段话： 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，...
前言通过上篇，我们知道前端理由的两种实现方法，Hash 路由与 History 路由，并且用它们分别实现了一个前端路由。接下来我们就将 Vue 与 Hash 路由结合，实现一个非常简单的 vue-router 吧。开始实现想象一下，如果自己实现了一个 vue-router，会怎么去使用呢？参考 vue-router 官方的使用方式，看看 html 的使用：<div id="app"><p><router-link to="#/">home</router-link><router-link to="#/book">book</router-link><router-l...
在学习 vue-router 的代码之前，先来简单了解一下前端路由。 前端路由主要有两种实现方法： Hash 路由History 路由先来看看这两种方法的实现原理。 接着我们将用它们来简单实现一个自己的前端路由。 前端路由 Hash 路由 url 的 hash 是以 # 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 hash 改变时，页面不会因此刷新，浏览器也不会向服务器发送请求。 http://www.xxx.com/#/home 同时， hash 改变时，并会触发相应的...
vue-router是Vue.js官方提供的一套专用的路由工具库 安装命令如下 npm i vue-router -Dvue-router 实例是一个Vue插件，我们需要在Vue全局引用中通过Vue.use() 将它接入到Vue实例中。 在我们的工程中，,main.js是默认的程序入口文件，所有的全局配置都会在这个文件中进行。 我们在main.js中加入如下引用 import VueRouter from vue-router Vue.use(VueRouter)这样就完成了 vue-router最基本的安装工作了。 接下来我们要实现的功能描...
在开发webApp的时候，考虑到用户体验，经常会把不需要调用个人数据的页面设置成游客可以访问，而当用户进入到一些需要个人数据的，例如购物车，个人中心，我的钱包等等，在进行登录的验证判断，如果判断已经登录，则显示页面，如果判断未登录，则直接跳转到登录页面提示用户登录，今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建，并且具有...
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。 问题描述: 之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。 解决方法： 通过阅读vue-router的官方文档，发现重定向可以解决这个问题。 如之前文件路径是'/live/detail/id=7234'，'/skill/microList/',新项目路径是 '/s/live/detailid=7234'...
单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。 解决办法 .vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件 官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promis...
需求说明： 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行，通过 npm run build apiUrl 即可修改接口入口，用于从 docker 部署到不同的测试服务器上，其次是路由模式的问题，部署到测试服务器上的需要是 history 模式，但是产品是用 electron + vue 开发的桌面应用，electron 硬性要求 vue-router 的路由模式是 hash 模式，所以命令行需新增一个配置项 mode ，mode 可选值有 history 、hash 最终结果： npm r...
背景 在开发提分加项目的过程中，遇到了点击下拉菜单时在新窗口中打开页面，由于之前一直做的是单页面应用，没有碰到过类似的需求，于是上网搜了一下解决办法，也再次系统地温习了一下vue-router。 解决 使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。const {href} = this.$router.resolve({name: "statistics-explain",params: {classID: id,ex...
最近因为业务需要，实现了一个简单的前端 router，正好也来看一下 vue router 是怎么实现的。这次先来一起看看 vue-router 初始化时做了什么。 vue router 的初始化使用步骤我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤： 引入 vue-router： import VueRouter from vue-router;利用 vue 的插件机制，加载 vue-router： Vue.use(VueRouter);实例化 VueRouter：...
说明：vue-router的几个文章中例子是连贯的，因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字，根据名字进行匹配给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。二、代码展示： 目录视图1、命名路由 2、命名视图 index.js import Vue from vue import Router from vue-router import Goodlists from @/Goodlists/goods import Title from @/Goodlists/title import Img ...
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样： 浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）浏览器根据数据包的 Content-Type 来决定如何解析数据简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资...