最近的业务涉及到了axios的拦截器，要在request.js里面要根据状态码来跳转页面，这时候我就面对了几种跳转选择：

1、使用location.href='/url'来跳转，简单方便，但是刷新了页面。

2、使用history.pushState('/url')，无刷新页面，静态跳转。

3、引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

vue路由切换和用location切换url的区别的更多相关文章

  1. vue路由\导航刷新后:ative\localStorage\url截取参数

    <el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...

  2. Vue路由的hash模式与history模式的区别?

    1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别?   hash                    ...

  3. Vue路由实现之通过URL中的hash（#号）来实现不同页面之间的切换（图表展示、案例分析、附源码详解）

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  4. vue路由+vue-cli实现tab切换

    第一步:搭建环境 安装vue-cli cnpm install -g vue-cli安装vue-router cnpm install -g vue-router使用vue-cli初始化项目 vue ...

  5. vue路由中 Navigating to current location ("/router") is not allowed

    报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...

  6. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  9. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

随机推荐

  1. 云原生时代，Java的危与机（周志明）

    说明 本篇文章是转载自周志明老师的文章,链接地址:https://www.infoq.cn/article/RQfWw2R2ZpYQiOlc1WBE 今天,25 岁的 Java 仍然是最具有统治力的编 ...

  2. 1款开源工具，实现自动化升级K3S集群！

    即便你的集群能够平稳运行,Kubernetes升级依旧是一项艰难的任务.由于每3个月Kubernetes会发布一个新版本,所以升级是十分必要的.如果一年内你不升级你的Kubernetes集群,你就会落 ...

  3. ADF 第六篇：Copy Data Activity详解

    在Azure 数据工程中,可以使用Copy Data 活动把数据从on-premises 或云中复制到其他存储中.Copy Data 活动必须在一个IR(Integration Runtime)上运行 ...

  4. python初学者-从键盘获取信息

    name = input(">>> 姓名:") QQ = input(">>>QQ: ") phone_num = inpu ...

  5. easyui字典js 切换 jsp页面显示的内容

    在列表中直接切换 formatter: function (value) {var name;if(value==0){name='待审批'}else if(value==1){name='通过'}e ...

  6. PP模块的组织架构

    组织架构的层次,从上而下依次是: (1),集团-->对应系统client级别,用户登录SAP系统时,每一个client就是对应一个集团:在数据库中,每一个client都对应一个唯一的标识. (2 ...

  7. Linux 时间同步 05 chrony时间同步

    Linux 时间同步 05 chrony时间同步 目录 Linux 时间同步 05 chrony时间同步 chrony 的优势: chrony包介绍 安装chrony 配置与外部时间服务器进行时间同步 ...

  8. [简单-剑指 Offer 53 - II. 0～n-1中缺失的数字]

    [简单-剑指 Offer 53 - II. 0-n-1中缺失的数字] 一个长度为n-1的递增排序数组中的所有数字都是唯一的,并且每个数字都在范围0-n-1之内.在范围0-n-1内的n个数字中有且只有一 ...

  9. MySql Docker 主主配置

    MySql 主主 准备2台Linux服务器,并且在两台服务器上,同时安装docker,国内的同学可以使用aliyun的镜像安装. curl -fsSL https://get.docker.com - ...

  10. 聊一聊这个总下载量3603w的xss库，是如何工作的？

    上篇文章这一次,彻底理解XSS攻击讲解了XSS攻击的类型和预防方式,本篇文章我们来看这个36039K的XSS-NPM库(你没有看错就是3603W次, 36039K次,36,039,651次,数据来自h ...