router.go,router.push,router.replace的区别
除了使用 <router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。当你点击 <router-link>
时,这个方法会在内部调用,所以说,点击 <router-link :to="...">
等同于调用 router.push(...)
。
声明式 | 编程式 |
<router-link :to="..."> | router.push(...) |
该方法的参数可以是一个字符串路径,或者一个描述地址的对象,例如:
// 字符串
router.push('home') // 对象
router.push({ path: 'home' }) // 命名的路由
router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }}) const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
router.replace(location, onComplete?, onAbort?)
跟 router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式 | 编程式 |
<router-link :to="..." replace> | router.replace(...) |
router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
。
例子:
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1) // 后退一步记录,等同于 history.back()
router.go(-1) // 前进 3 步记录
router.go(3) // 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
router.go,router.push,router.replace的区别的更多相关文章
- VUE的两种跳转push和replace对比区别
router.push(location) 在vue.js中想要跳转到不同的 URL,需要使用 router.push 方法. 这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按 ...
- [Vue]vue-router的push和replace的区别
1.this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面. 2.this.$router.replace() 描述: ...
- react中路由跳转push与replace的区别
路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...
- React native路由跳转navigate、push、replace的区别
由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation
In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...
- window.location.href 和 window.location.replace 的区别
window.location.href 和 window.location.replace 的区别 1.window.location.href=“url”:改变url地址: 2.window. ...
- Document.location.href和.replace的区别
转自:https://www.cnblogs.com/GT_Andy/archive/2007/10/31/1922138.html 1 Document.location.href和.replace ...
- push和commit的区别
push和commit的区别 git作为支持分布式版本管理的工具,它管理的库(repository)分为本地库.远程库.git commit操作的是本地库,git push操作的是远程库. git c ...
- push和pop的区别?
1.push是什么?(推进) push就是推,延伸为推进.这个它是汇编的一个指令,(在其它语言中也可能会见到它).意思都是差不多的,就是把一个元素放入栈中.你可以假想栈是一个放光盘的那种盒子,有底没盖 ...
随机推荐
- vue-filter
- 实现并发join的方法
import threadingimport time def music(): print("begin to listen %s" %time.ctime()) time.sl ...
- https://www.cnblogs.com/beileixinqing/p/7724779.html vue-cli生成的项目配置开发和生产环境不同的接口 vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了
方法二:(集热心网友提供的方案) 一般项目webpack会有两个或多个配置文件,如: webpack.prod.conf.js 对应线上打包 webpack.dev.conf.js 对应开发环境 使用 ...
- 引:Jmeter添加变量的四种方法
一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...
- Kotlin sealed class
密封类的概念对于我这种从古代语言进化到现代语言的老古董来说还是有点绕腾的啊! 1. 密封类用来表示受限的类继承结构 解释:类中 元素值限制在某一个集合之中 2. 密封类可以有子类,但是所有的子类都必须 ...
- Faster-rcnn实现目标检测
Faster-rcnn实现目标检测 前言:本文浅谈目标检测的概念,发展过程以及RCNN系列的发展.为了实现基于Faster-RCNN算法的目标检测,初步了解了RCNN和Fast-RCNN实现目标检 ...
- Thinkphp 3.2 验证码图片显示错误解决方法
在调用验证码之前加上 ob_clean(); 不显示验证码的代码: public function verify(){ $verify = new \Think\Verify(); $verify-& ...
- 字符串转化为int数组
String a = "1,2,3,4,5,6" String str[] = a.split(","); int array[] = new int[str. ...
- bat cmd 删除文件或文件夹 删除注册表
@echo off rd "C:\Documents and Settings\Administrator\桌面\新建文件夹" del 是用来删除文件的,删除文件夹的命令是rd 注 ...
- 在webpack自定义配置antd的按需加载和修改主题色
最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...