this.$router.replace和this.$router.push及this.$router.go()的区别

LinMeng 等级 1754 0 0

this.$router.push

1.跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 2.声明式 编程式 router.push(...)//该方法的参数可以是一个字符串路径,或者一个描述地址的对象。

  this.$router.push({path:'/index'})
  this.$router.push({path:'/index',query:{name: '123'}})
  this.$router.push({name:'index',params:{name:'123'}})

 // 字符串

  router.push('home')
  // 对象
  this.$router.push({path: '/login?url=' + this.$route.path});
  // 带查询参数,变成/backend/order?selected=2
  this.$router.push({path: '/backend/order', query: {selected: "2"}});
  // 命名的路由
  router.push({ name: 'user', params: { userId: 123 }})

this.$router.replace

1.跳转到指定URL,替换history栈中最后一个记录,点击后退会返回至上上一个页面 (A----->B----->C 结果B被C替换 A----->C) 2.设置 replace 属性(默认值: false)的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面 加上replace: true后,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

  <router-link :to="..." replace></router-link>
  // 编程式:
  router.replace(...)
  //push方法也可以传replace
  this.$router.push({path: '/home', replace: true})

两种传参方式

    this.$router.push({
      path: '/home',
      query: {
        site: [],
        bu: []
      }
    })
params:
  this.$router.push({
    name: 'Home',  // 路由的名称
    params: {
      site: [],
      bu: []
    }
  })
params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

this.$router.go(n)

1.类似window.history.go(n),向前或向后跳转n个页面,n可正(先后跳转)可负(向前跳转) 2.this.$router.go(1) //类似history.forward() this.$router.go(-1) //类似history.back()

收藏
评论区

相关推荐

this.$router.replace和this.$router.push及this.$router.go()的区别
this.$router.push 1.跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 2.声明式 <routerlink :to"...." 编程式 router.push(...)//该方法的参数可以是一个字符串路径,或者一个描述地址的对象。 this.$router.push('/index')
去掉字符串中的html标签
有些时候只需要获取到字符串中的文字内容,不需要html标签,用以下代码实现 //去掉字符串中标签 content content.replace(/<.?/g, '').replace(/&nbsp;/ig, '').replace(/\s/ig, '')
1024!程序员节快乐!
if (!window.\_\_second\_open\_\_) { document.getElementById('js\_image\_desc').innerHTML = "1024!程序员节快乐!".replace(/\\r/g,"").replace(/\\n/g,"<br>").replace(/\\s/g,"&nbsp;"); } ![]
Oracle中自定义函数 无参数 输入参数 输出参数等各种用法
-- 19-1:建立无参数的函数 CREATE OR REPLACE FUNCTION cur_datetime RETURN VARCHAR2 IS BEGIN RETURN TO_CHAR(sysdate, 'YYYY"年"MM"月"DD"日"HH24″时"MI"分"SS"秒"'); END
mysql 批量更新
### mysql 批量更新共有以下四种办法 ### 1、 replace into 批量更新 replace into 表名l (id,字段1) values (1,'2'),(2,'3'),...(x,'y'); ### 2、insert into ...on duplicate key update批量更新 insert int
mysqldump导出数据时,如何调整每个insert语句的values值的数量?
当我们对一个包含1千万行记录的表history执行导出时,假设只用的备份语句如下:   #mysqldump -uroot -p'123456'  --set-gtid-purged=OFF tdb history>history.sql 当我们执行表的恢复时,执行如下语句: mysql> source history.sql 。。。 Query
mysql去除数据中的回车符,空白符,换行符,水平制表符
1,在将utf-8编码的txt文件导入数据库的时候,可能会遇到将不可见字符(回车,换行)导入数据的情况,这样查询就会失效,这时可以利用update和replace来替换这些字符。 UPDATE 表名 SET  列名 = REPLACE(REPLACE(REPLACE(REPLACE(列名, CHAR(10), ''), CHAR(13), ''), CHA
oracle 备份建表sql
STEP1 :先在外部sql窗口执行:EXECUTE IMMEDIATE 'CREATE OR REPLACE DIRECTORY OUTPUTDIR AS ''D:\\''';   STEP2:创建存储过程,然后执行~。 > CREATE OR REPLACE PROCEDURE TABLE\_TO\_TXT2 IS > > FILE\_HAN
48 JS
1•历史对象: 用以存储客户端最近访问的网址清单。 格式: •history.属性 history.方法(参数) <a href="js9.jsp">单击</a> <a href="#" onclick="history.back();return false;">返回</a> 注:一定要有return false
CentOS 显示历史执行过的命令以及用户历史命令缓存文件
1、history命令用于显示历史执行过的命令 执行 history命令能显示出当前用户在本地计算机中执行过的最近 1000 条命令记录。 如果觉得 1000 不够用,还可以自定义/etc/profile 文件中的HISTSIZE 变量值。 在使用 history 命令时,如果使用\-c 参数则会清空所有的命令历史记录。 [root@bigd
Database schema
Jira | 事务与项目跟踪软件,敏捷团队的首先软件开发工具。 Database – Change history =========================     Jira将每个Issue的变更历史记录存储在 `changegroup` 和 `changeitem` 表中。每条`changegroup` 表记录,描述了它关联的Issue、变更
IDEA中git远程版本回退
工作中遇到git远程仓库需要回退到历史版本的问题,根据网上的搜索结果结合自己的实践,整理了如下步骤: **1\. 在“Show History”中找到当前版本(取名:newVersion)和想要回退到的版本(oldVersion)** ![](https://img2018.cnblogs.com/blog/1284985/201810/1284985-
JS window对象 返回前一个浏览的页面 back()方法
[JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL。 语法: window.history.back();](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Fyongbin668%2Fp%2F55
Kubernetes之Deployment滚动升级和回滚
    k8s版本1.14 查看Deployment的升级历史 ================= _List-1_ xx@xx:~/xx$ kubectl rollout history deployment xxxx -n xxx deployment.extensions/xxx REVISION CHANGE-CA
Python Apache日志处理脚本
#!/usr/bin/python #coding=gb2312 f=open('/var/log/apache2/access.log','r'); log=f.readline().rstrip(); log_home=log.split(); print log_home; ip=log_home[0]; date=log_home