浏览器路由导航：Push vs Replace

发表于2023-04-27|更新于2024-11-30

|总字数:200|阅读时长:1分钟|浏览量:

路由2

浏览器历史记录有两种方式
push：不会删去刚刚的页面，而是添加新的页面记录，像压栈一样去记录
replace：直接替换掉刚刚的页面记录。
浏览器默认为push操作
再router-link中添加一个属性:replace="true"他会将改点击事件记录为replace操作

编程式路由导航

即不通过router-link即不适用a标签。而是通过写方法于button绑定之类的方法。
关键方法：this.$router.push({})这里通过实现router的push方法跳转页面，也可以使用replace方法进行跳转。同样的push中的对象就是to的对象时写法。有name，path，params，query参数。

两种方法。

$router.back()后退页面，￥router.forword()页面前进

文章作者: 小贺同学

文章链接: https://zfxt.top/posts/f2612c99/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源小贺同学的blog！

相关推荐

Ajax、XHR、Fetch、Axios 关键图解

关键图解 Ajax全称（Asynchronous JavaScript And XML） Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。他可以局部刷新页面，不用重载整个页面。 XHRXHR(XmlHttpRequest)是一种用来实现Ajax的方法示例： 123456789101112131415161718<body> <script> function ajax(url) { const xhr = new XMLHttpRequest(); xhr.open("get", url, false); xhr.onreadystatechange = function () { // 异步回调函数 if (xhr.readyState === 4) { if (xhr.status === 200) { ...

ES6 Reduce：数组归并方法

ES6中的reduce方法，是一种数组的归并方法。他的每一次遍历后的值会留给下一次继续遍历。 1234567891011121314let arr5 = ['name','age','long','short','long','name','name'] //pre第一次的值，cur当前值 {}标识pre的预设值let arrResult1 = arr.reduce((pre,cur) =>{ console.log(pre,cur) if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre},{})console.log(arrResult1)//结果：{name: 3, age: 1, long: 2,...

Fetch API：Promise 驱动的异步请求

Fetchfetch是与xhr不同的另一种发送请求的方法。他本身也是一种已经实现的API。他并不需要通过回调请求，而是采用了promise的返回结果方式，采用了链式结构。当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false），仅当网络故障时或请求被阻止时，才会标记为 reject。 fetch 不会发送跨域 cookie，除非你使用了 credentials 的初始化选项。（自 2018 年 8 月以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）123fetch('http://example.com/movies.json') .then(response =>...

Get-Post请求参数区别

主要解决问题为get请求，post请求，params参数，data参数的区别和联系。首先Get请求不能携带请求体，服务器接收到Get请求后，会默认忽视掉Get请求的请求体。也就是Get请求只能携带params参数，这个参数会直接跟在请求地址后面，组成一个字符串。 post请求既可以使用params请求，也可以携带data参数，data的参数会放在payload中。springboot需要获取post发送的payload需要通过@RequestBody来获取。

Vue 代理服务器配置新增建议

关于配置vue的代理服务器新增两点建议普通的http或者https请求。满足在vue.config.js配置一个普通的代理然后在使用该代理时可以不用写全完整的uri。而只用写具体的访问地址如下12345678devServer:{ proxy:{ '/api/':{ target:'http://localhost:9090/', pathRewrite:{'^/api':""}, ws:false }} 通过axios向后端发送请求时1234567this.axios({ url:'/api/login', method:'get', params:{ username:this.username ...

Vue 插槽：具名和作用域

具名插槽就是可以在组件中，可以定义插槽的名字 1<slot name="haha"></slot> 然后可以在调用该组件的父组件中通过<template v-slot="haha">...</template>来插入新的结构标签到组件中。作用域插槽。他的最大特点是可以从子组件传递数据到父组件。通过:标记，和prop类似，将具体的对象发送到父组件中使用。 12345678910111213141516//子组件<slot name="haha" :games="games" :msg="msg"></slot>//父组件//这里的test是可以任意取名的。他会将子组件传递过来的所有值全部接受，然后你看也获取其中的对象<template v-slot="haha" scope ="test"><ul v-for="(game,index)...

评论

数据加载中