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

LinMeng 等级 748 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()

收藏
评论区

相关推荐

JavaScript 中的二叉树以及二叉搜索树的实现及应用
接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据非有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:) (https://imghelloworld.osscnbe
记一次HEX和RGB互换算法的思考及应用
由于笔者最近在开发可视化平台,所以对动态编辑器这块做了一段时间的研究, 发现其中有个小模块的知识点比较有意思,所以在这里分享一下. 作为前端工程师, 我们平时在对接设计稿的时候, 是不是经常会涉及到颜色值的转换呢? 比如从HEX值转化到RGB值, 亦或者是从RGB值转换到HEX值, 这块在PhotoShop等设计软件中非常常见, 在做类似于画板, 设计类的
this.$router.replace和this.$router.push及this.$router.go()的区别
this.$router.push 1.跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 2.声明式 <routerlink :to"...." 编程式 router.push(...)//该方法的参数可以是一个字符串路径,或者一个描述地址的对象。 this.$router.push('/index')
【Golang】Go 语言今年 12 岁,何去何从,现状到底如何?
不说不知道,一说下一跳。Go 语言已经开源 11 周年了,感觉是一路高歌, Release History (polarisxu 整理)如下: 2011 年 3 月 16 日,Go 语言的第一个稳定版本 r56 发布; 2012 年 3 月 28 日,Go 语言的第一个正式版本 Go1 发布,并承诺 1.x 的 兼容性; 2013 年 5 月 13
helloworld.net 的总结以及2021年的期待
没有反思的人生不值得过!由时不时向外张望,彻底转向向内审视的一年。 2020年,公历闰年,共366天,52周零2天。二十一世纪二十年代的第1年。 大家好,我是待兔, helloworld.net也就是 helloworld开发者社区的创始人之一,由于前几天感冒了,你知道的,这个时间感冒是有点麻烦的,所以导致这篇文章来的稍晚了点,好饭不怕晚,晚点写有晚点写
mongodb的安装及主从复制
mongodb的安装及主从复制 一、mongodb安装 1.下载mongodblinux版本(注意32位和64位的区别) wget http://downloads.mongodb.org/linux/mongodblinuxx86\_642.0.7.tgz 2.解压 tar xvf mongodblinuxx86\_642.0.7.t
去掉字符串中的html标签
有些时候只需要获取到字符串中的文字内容,不需要html标签,用以下代码实现 //去掉字符串中标签 content content.replace(/<.?/g, '').replace(/&nbsp;/ig, '').replace(/\s/ig, '')
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理 javascript getUrlParam() { let params {}; const url window.location.href.replace(/\//g,'').replace(/\?/g,'&'); url.replace(/?&(^&)
Python 库的安装及使用 常见错误异常及解决办法
1.包导入错误ModuleNotFoundError: No module named 'sklearn.cross_validation' 错误: python from sklearn.cross_validation import train_test_split ModuleNotFoundError: No module named 'sklea
人工智能数学基础1:三角函数的定义、公式及固定角三角函数值
一、三角函数的定义及名称在直角三角形中,当平面上的三点A、B、C的连线,AB、AC、BC,构成一个直角三角形,其中∠ACB为直角。对∠BAC(在此简称为θ)而言,对边(opposite)aBC、斜边(hypotenuse)cAB、邻边(adjacent)bAC,则三角函数定义如下:二、三角函数的变化趋势及图像  正弦值在 \[2kππ/2,2kπ+π/2
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
c++类和继承面试点25连问
本篇文章连问面试时经常会遇到的类和继承相关25个问题,看看你能回答出几道题呀。还是先看一下思维导图,如下: 1. c++的三大特性是什么c++的三大特性,说白了其实就是面向对象的三大特性,是指:封装、继承、多态,简单说明如下: 封装是一种技术,它使类的定义和实现分离,也就是隐藏了实现细节,只留下接口给他人调用,另外封装还有一层意义是它把某种事物具现出属性和方
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
一篇文章带你了解JavaScript Window History
一、前言window.history 对象可以不用窗口window前缀编写。为了保护用户的隐私,有限制的JavaScript可以访问此对象。history.back() 与点击浏览器中的back按钮相同。history.forward() 与点击浏览器中的forward按钮相同。 二、history对象window.history对象包含浏览器会话历史
PostgreSQL的函数和存储过程--MemFireDB
简介PostgreSQL是最流行的对象关系型数据库系统。它是一个强大的、高性能的数据库系统。在这篇文章中,我们将讨论如何使用函数和存储过程来执行操作,如插入、删除、更新和查询。感兴趣的同学可以通过 memfiredb.com 提供的免费云数据库一边操作一边阅读。 函数一般来说,函数是一组进行任何操作的SQL语句,如选择、插入、删除和更新。在PostgreSQ