项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在vue中浏览器的前进和后退 一.后退功能 vue中的后退有好多种方法可以使用,使用这些方法前要确认有之前的页面,否则后退就到了一个空页面! 可以通过history.length来获取历史记录的长度 console.log(history.length) 1.window.history对象中保存有页面访问的历史记录,在编写时可不使用 window 这个前缀. 加载历史列表中的前一个UR

刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next * @returns */ import store from './vuex/store' // 全局错误处理,全局loading import { setLoading, setTip } from './vuex/actions/doc_actions' export default func

v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 从0.x迁移 你需要做的唯一改动就是手动引入样式文件: 1 import 'viewerjs/dist/viewer.css' 安装 使用npm命令安装 1 npm install v-viewer 使用 引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用. 12345678910111213141516171819202122232425 <template>

项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9. import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = wind

引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview来打开,后退其实是关闭当前webview,其上一个webview就自然显示出来:但是在单页的webapp应用中,所有内容其实是在一个页面中展示的,不存在多页的情况,这时就需要前端开发来想办法实现相应的体验效果. 首先需要说明一下,本文所说的前进刷新后退不刷新是指组件是否重新渲染,比如列表A页面,点击

拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3.在mian.js写 Vue.http.interceptors.push(function(request, next) { if (request.url[0] === '/') { request.url = process.env.API + request.url; } next(funct

拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( request ) { // 更改请求类型为POST request.method = 'POST'; return request; }, response: function ( response ) { // 修改返回数据 response.data = [{ custom: 'custom' }]

  keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/index.js中.对于需要缓存的路由加meta中加上keepAlive: true export default new Router({ routes: [ {path: '/', redirect: '/Home', meta: {keepAlive: true,} }, ] }) 在app.vue中

```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) //清除默认样式 import axios from

1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/home', component: xxx, meta: {allowBack: false} } 2.在全局的router.beforeEach 函数里面获取allowBack的状态,同时更新vuex的allowBack的值,如: let allowBack = true // 给个默认值trueif

https://blog.csdn.net/sinat_37255207/article/details/89373825 因为项目Vue router 连续嵌套了好几层 首先检查keep-alive的 include 和including 属性是否应用正确 include 是缓存包含  including是缓存相反 项目中嵌套了好几层keep-alive 那个页面需要缓存 应当给当前页面 父级最近的router 外面加keep-alive  而不是APP.vue 的最外层 因为所做的项目中有很

简单介绍v-viewer的两种使用方法: Demo 安装依赖: npm install v-viewer --save 全局引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) 数据格式: 一:点击图片列表预览图片 <viewer :images="imagesList"> <img v-for="src in imagesList" :

1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:true } }, 2.在mian.js中添加 router.beforeEach(function (to, from, next) { // to 想要去哪里 // from 从哪里来 // next 跳转到哪里 if(to.meta.requireAuth){ // 要去的url只有登陆成功后才能

  template <input type="file" ref="input_file" @change="fileChange" hidden> <img :src="base64Img.join('')" alt=""> <!-- base64Img是个字节数组需要拼起来才能用 --> script data () { return { base64Img: []

this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http.post('url',fd,{progress:function(){ _self.showPrompt('Please wait',true) }}).then(function(res){.... vue拦截器全局main里面 Vue.http.interceptors.push((reque

1. 认识路由 1.1 路由概念 路由是什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 --- 维基百科 路由器提供了两种机制:路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 路由中一个非常重要的概念:路由表 路由表本质上就是一个映射表,决定了数据包的指向 1.2 后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的,服务器直接生产渲染好对应的HTML页面返回给客户端进行展示.

Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vue init webpack gwc_manage  初始化过程中,会让我们进行一些依赖包,项目配置的基本选择.项目名称,作者信息,描述,是否安装路由,eslint,测试单元,npm/yarn. 这里不选择安装eslint和测试单元.用过的人应该知道非常酸爽. 项目初始化成功后, npm run d

1.内容回顾 1.视图中常见的继承 2.频率访问控制源码 3.序列化,反序列化 2.初始化代码 1.后端代码:AuthView (1)目录结构 (2)urls (3)view (4)注释掉cors (5)效果 2.前端代码:Login组件 (1)App.vue 主组件 (2)router/index.js  路由 (3)Login.vue组件 v-model监听数据 @click 方法 ajax请求 <template> <div> <h1>用户登录</h1>

vue-router实现原理 近期面试,遇到关于vue-router实现原理的问题,在查阅了相关资料后,根据自己理解,来记录下.我们知道vue-router是vue的核心插件,而当前vue项目一般都是单页面应用,也就是说vue-router是应用在单页面应用中的.那么,什么是单页面应用呢?在单页面应用出现之前,多页面应用又是什么样子呢? 单页面应用与多页面应用 单页面 即 第一次进入页面的时候会请求一个html文件,刷新清除一下.切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求

引言 Javascript是前端面试的重点,本文重点梳理下 Javascript 中的常考基础知识点,然后就一些容易出现的题目进行解析.限于文章的篇幅,无法将知识点讲解的面面俱到,本文只罗列了一些重难点. 一.变量类型 1.JS 的数据类型分类 根据 JavaScript 中的变量类型传递方式,分为基本数据类型和引用数据类型.其中基本数据类型包括Undefined.Null.Boolean.Number.String.Symbol (ES6新增,表示独一无二的值),而引用数据类型统称为Objec