1.router.push(location)=====window.history.pushState

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

1
2
3
4
5
6
7
8
9
10
11
// 字符串
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由
router.push({ name: 'user'params: { userId: 123 }})
 
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

2.router.replace(location)=====window.history.replaceState

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录

3.router.go(n)====window.history.go

1
2
3
4
5
6
7
8
9
10
11
12
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
 
// 后退一步记录,等同于 history.back()
router.go(-1)
 
// 前进 3 步记录
router.go(3)
 
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

vue router.push(),router.replace(),router.go()的更多相关文章

  1. vue 之this.$router.push、replace、go的区别

    一.this.$router.push 说明:跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 使用: this.$router.push('/index') this ...

  2. Vue this.$router.push、replace、go的区别

    1.this.$router.push 描述:跳转到不同的url,但这个方法会向history添加一个记录,点击后会返回到上一个页面 用法 //字符串 this.$router.push('home' ...

  3. this.$router.push、replace、go的区别

    1.this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面. 用法: 2.this.$router.replace() ...

  4. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  5. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  6. router.go,router.push,router.replace的区别

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.当你点击 <router-link> 时,这个 ...

  7. Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  8. Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  9. 【转】Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

随机推荐

  1. Kruskal算法-HDU1863畅通工程

    链接 [http://acm.hdu.edu.cn/showproblem.php?pid=1863] 题意 Problem Description 省政府"畅通工程"的目标是使全 ...

  2. 个人阅读作业2:结合《No Silver Bullet》谈谈我在软件开发过程的遇到的困难与体会

    英文捉急,只能挑一段看得比较懂的,而且正好和我们现在编程任务联系比较紧密的内容来谈一谈体会. 在<No Silver Bullet>中,作者描述了造成软件本质性困难(essence)的四个 ...

  3. JavaScript —— 数组

    Array方法 1.查找元素 indexOf()用来查找传进来的参数在目标数组中是否存在.如果目标数组包含该参数,就返回该元素在数组中的索引:如果不包含,就返回-1. 如果数组中包含多个相同的元素,i ...

  4. 最新一课 老师指点用Listview适配器

    上课前 <?xml version="1.0" encoding="utf-8"?>    <ScrollView xmlns:android ...

  5. git 的安装及使用

    一.Git的安装和使用 1.1 Linux下版本库的创建 1.1.1 创建一个版本库 repository,在一个合适的地方创建一个空目录: root@zengyue:/# mkdir -p /hom ...

  6. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  7. TDD中测试替身学习总结

    在使用TDD开发时,经常会遇到需要被测对象需要依赖其他子系统的情况,但是你希望将测试代码跟依赖项隔离,以保证测试代码仅仅针对当前被测对象或方法展开,这时候你需要的是测试替身.测试替身可以分为四类:- ...

  8. SMBv1 is not installed by default in Windows 10 Fall Creators Update 2017 and Windows Server, Semi-annual Channel

    windows 10 rs3 release enable SMBv1 windows 10 rs3 release file sharing https://support.microsoft.co ...

  9. WIN10 评估版 查看过期时间

    命令行运行winver,弹出的窗口显示过期时间,如 下图: 又可以再用一段时间教育版了,本机预装的的家庭版序列号,还没法从教育版降级到家庭版,可悲吧(win7时代就不允许从高级降低到低级用啊)

  10. DOM的基本操作

    什么是DOM 1:文档对象模型(DocumentObjectModel,DOM) 2:DOM定义了访问和操作HTML文档的标准方法. 3:DOM将HTML 文档表达为树结构. 其他查询元素的方法: d ...