vue(四)、vue router.push(),router.replace(),router.go()

「爱情、让人受尽委屈。」 2022-05-14 16:08 278阅读 0赞

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

// 字符串
    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

// 在浏览器记录中前进一步，等同于 history.forward()
    router.go(1)
     
    // 后退一步记录，等同于 history.back()
    router.go(-1)
     
    // 前进 3 步记录
    router.go(3)
     
    // 如果 history 记录不够用，那就默默地失败呗
    router.go(-100)
    router.go(100)

参考：[https://www.cnblogs.com/lwwen/p/7245083.html][https_www.cnblogs.com_lwwen_p_7245083.html]

[https_www.cnblogs.com_lwwen_p_7245083.html]: https://www.cnblogs.com/lwwen/p/7245083.html

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】四、了解Promise

后端程序员的vue学习之路一、了解Promise 1、What is Promise？ 2、回调地狱问题 3、Promis

秒速五厘米/ 2023年10月09日 15:16/ 0 赞/ 54 阅读

相关 vue(四)

接口调用方式原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」

怼烎@/ 2023年07月17日 06:46/ 0 赞/ 27 阅读

相关 VUE---爬虫播放器(四)---功能实现--vue3

数据处理编写api.js文件处理获取的数据存储歌曲信息获取歌曲vkey 获取歌曲处理歌词

朴灿烈づ我的快乐病毒、/ 2022年12月27日 11:26/ 0 赞/ 203 阅读

相关 Vue指令 (四)

指令是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带

谁借莪１个温暖的怀抱￠/ 2022年11月29日 11:56/ 0 赞/ 175 阅读

相关 vue2 基础（四）

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；这里只是用更为直观的方式让你了解一下vue； \----------------

待我称王封你为后i/ 2022年05月27日 12:44/ 0 赞/ 281 阅读

相关 vue(四)、vue router.push(),router.replace(),router.go()

1.router.push(location)=====window.history.pushState 想要导航到不同的 URL，则使用 router.push 方法。这

「爱情、让人受尽委屈。」/ 2022年05月14日 16:08/ 0 赞/ 279 阅读

相关 Vue.js入门(四)

目录第一章:前端路由与后端路由的区别 1.1 如何使用第二章:路由的基本使用 2.1 路由vue-router的基本使用 2.2 路由router-link的使用

绝地灬酷狼/ 2022年04月17日 01:53/ 0 赞/ 219 阅读

相关 Vue系列十四：创建vue项目

一、说明 1. vue-cli 是 vue 官方提供的脚手架工具 2. github:[https://github.com/vuejs/vue-cli][https_g

我会带着你远行/ 2022年01月30日 06:36/ 0 赞/ 303 阅读

相关 VUE（四）打包

npm run build ![20190715114849649.png][] 打包后生成的文件夹 ![watermark_type_ZmFuZ3poZW5na

亦凉/ 2021年12月10日 02:39/ 0 赞/ 443 阅读

相关 Vue(四)【进阶】

`$nextTick` `Vue`是异步渲染 `data`改变之后，`DOM`不会立刻渲染 `$nextTick`会在`DOM`渲染之后被触发，获取最新`DOM`

水深无声/ 2021年06月26日 16:06/ 0 赞/ 481 阅读