最近的业务涉及到了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. 【原创】WPF TreeView带连接线样式的优化（WinFrom风格）

    一.前言 之前查找WPF相关资料的时候,发现国外网站有一个TreeView控件的样式,是WinFrom风格的,样式如下,文章链接:https://www.codeproject.com/tips/67 ...

  2. 记录一下网上找到的别人写的angualr总结

    感觉写的不错,所以讲链接保存下来 https://www.jianshu.com/p/f0f81a63cbcb

  3. 多年总结IDEA 使用技巧 (建议收藏！)

    很长一段时间没有更新了,前段时间转测试了,浪费了一些时间,终于可以写文章了,今天来写一下之前自己开发的一些习惯,因为自己本身自己是一个极简主义所以 开发喜欢这样:. 全屏显示 我们可以使用[Prese ...

  4. 【Go语言绘图】图片添加文字（二）

    这一篇将继续介绍gg库中绘制文字相关的方法,主要包括:DrawStringAnchored().DrawStringWrapped().MeasureMultilineString().WordWra ...

  5. Python三个处理excel表格的库

    三个向excel表格写入数的库:xlwt,xlsxwriter,openpyxl,代码如下: 1 #第一个库,xlwt,不能写超过256列的表格 2 import xlwt 3 4 #新建workbo ...

  6. C# 锁与死锁

    什么是死锁: 所谓死锁,是指多个进程在运行过程中因争夺资源而造成的一种僵局,当进程处于这种僵持状态时,若无外力作用,它们都将无法再向前推进. 因此我们举个例子来描述,如果此时有一个线程A,按照先锁a再 ...

  7. AWS中国区的那些“坑”

    前言 最近做的一个项目是要把公司在国外已经上线的一个物联网的项目移植到AWS中国区来. 由于AWS属于国外云产商,在中国运营,必须符合国家的相关规定: 必须是合资公司 (AWS北京区由北京光环新网运营 ...

  8. 访问需要HTTP Basic Authentication认证的资源的c#的实现 将账号密码放入url

    string url = ""; string usernamePassword = username + ":" + password; HttpWebReq ...

  9. webpack相关的问题

    随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用:又如sass和less的代码浏览器也是不支持的. 而如果摒弃了这些开发框 ...

  10. HTTP ERROR400的问题解决

    今天写添加功能,在点添加提交时报了一个"HTTP ERROR 400"的错误,如图, 请求提交的代码死活跳转不到后台,郁闷中,开启debug功能,开始一步步排查, 1.先单独把跳转 ...