最近的业务涉及到了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. curl使用技巧汇总

    1,curl 忽略证书安全验证 curl https://192.168.1.5:8443-insecure -I

  2. 本科入行可能吗？做到这3点，斩获BAT offer不是梦

    大家好,前两天有一个小伙伴加我微信咨询.他说他不想读研,想要直接本科毕业就参与工作.但是又担心自己由于没有学历优势,无法在校招当中获得机会,于是便来向我请教,能不能指点迷津提供一些具体的实操性措施.与 ...

  3. Kafka高性能的原理

    Kafka高性能的原理 高性能,高并发,高可用 使用了NIO技术.高并发. 顺序读写.硬盘的顺序读写性能要高于内存的随机读写. 跳表设计. 稀疏索引.index文件里面有部分offset的位置. 使用 ...

  4. vue封装API接口

    第一步: 首先引入axios 然后创建两个文件夹api和http http.js 里面的 1 import axios from 'axios';//引入axios 2 3 //环境的切换 开发环境( ...

  5. 闭关修炼180天--手写持久层框架（mybatis简易版）

    闭关修炼180天--手写持久层框架(mybatis简易版) 抛砖引玉 首先先看一段传统的JDBC编码的代码实现: //传统的JDBC实现 public static void main(String[ ...

  6. Core3.0返回的Json数据大小写格式问题

    前言 测试发现,CoreWebAPI返回的Json数据,会将字段的首字母转换为小写, 经百度得,返回数据会默认驼峰命名,导致的. 随即百度, https://www.cnblogs.com/cdone ...

  7. Win10-1909删除自带的微软输入法，添加美式键盘

    删除自带     输入法切换          

  8. 手把手教你搭饥荒专用服务器（五）—MOD自动下载安装（Windows+Linux）

    想了解更详细内容,请点击原文地址:https://wuter.cn/1985.html/ 饥荒专用服务器的mod设置总共有两种方法. 方法一 在本地游戏中更新mod,然后把mod上传到服务器,但是这种 ...

  9. Java生产环境下性能监控与调优详解视频教程 百度云 网盘

    集数合计:9章Java视频教程详情描述:A0193<Java生产环境下性能监控与调优详解视频教程>软件开发只是第一步,上线后的性能监控与调优才是更为重要的一步本课程将为你讲解如何在生产环境 ...

  10. oracle 19c dataguard silent install (oracle 19c dataguard 静默安装)

    环境说明 1.关闭透明大页 RHEL  6: # cat /sys/kernel/mm/redhat_transparent_hugepage/enabled [oracle@rhel 6 ~]$ c ...