Vue中history.go(0)和location.reload()的区别

最新推荐文章于 2023-08-17 16:06:38 发布
最新推荐文章于 2023-08-17 16:06:38 发布
阅读量1k 收藏 2
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdw5413/article/details/114630237
版权

Vue中history.go(0)和location.reload()的区别

最直观的区别：history.go(0)：刷新后滚动条的位置不变
location.reload()：刷新后滚动条会回到顶端

wdw5413
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
版本：v2.6.10 内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common.js、vue.runtime.common.dev.js等14个资源
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局方法。例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。 具体来说，`vue.global.js` 文件定义了以下内容： 1. `Vue` 对象：全局范围的 Vue 构造函数，用于创建 Vue 实例。 2. 全局方法：如 `Vue.createApp`、`Vue.component`、`Vue.directive` 等，用于定义组件、指令等全局内容。 3. 全局属性：如 `Vue.config` 用于配置全局行为，`Vue.version` 用于获取 Vue 的版本号。 4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js和vue.min.js
06-13
vue.js和vue.min.js
history.go(..)
msg_java2011的专栏
10-10 494
history.go(1)前进 history.go(0)刷新 history.go(-1)后退   开窗时刷新 关闭时刷新
javascript:history.go()和History.back()的区别(转载)
weixin_30342827的博客
01-12 550
转自：http://www.mikebai.com/Article/2009-11/757.html <input type=button value=刷新 onclick="window.location.reload()"><input type=button value=前进 onclick="window.history.go(1)"><input type...
history详解
qiyuancoder的博客
11-15 2330
history 对象包含用户在浏览器中访问过的页面的URL，自带的属性和方法如下： history.length 历史页面的URL数量，最小为1，最大为，即只能存50个历史页面记录。 history.back()、history.forward()、history.go() 分别表示跳转至上一个页面、下一个页面、指定的上下某个页面，history.go(-1) 等同于 history.back()，history.go(1) 等同于 history.forward()，history.go(0) 等同于当前
window.history.back()、window.history.go()返回上一页强制刷新
月下lk山人的博客
12-17 3301
通过history方法返回上一页时，返回的页面并不会刷新，这就造成了上一页的数据未及时更新，所以有时需要做刷新处理，如下 # 如果检测到页面是从“往返缓存”中读取的，刷新页面 window.addEventListener('pageshow', function(e) { if (e.persisted) { window.location.reload() } }) ...
window.history.go()和history.back()以及location.reload()的用法以及不同
xiaoma19941027的博客
11-04 1735
window.history.go(-1);   返回上一页, 原页面表单中的内容会丢失; window.history.back(-1);  返回上一页, 原页面表单中的内容会保留. 以下为举例： <input type="button" value="刷新" οncli...
history.go()和location.Reload()和location.href 区别
huihui870311的专栏
05-07 1306
1、history.go() history.go(1)前进 history.go(0)刷新 history.go(-1)后退 2、location.Reload() loaction.reload(false)和location.reload(true)有一个是先判断页面有没修改，有的话就从服务器下载页面，没有就直接从缓存里拿（这个会提升响应性能） 而把该方法的参数设置为 tru
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
调用浏览器中的前进和后退
ltg263的博客
08-14 1923
window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。 方法： history.back() - 加载历史列表中的前一个URL，这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL，这与在浏览器中点击前进按钮是相同的 实例: 代码如下:<html><butt
javascript 控制前进和后退：　　　使用history对象
weixin_30920513的博客
10-23 276
history对象同样是Window对象的一个子对象，它对应于浏览器的历史记录功能。例如使用后退按钮可以使浏览器导航到上一个页面，而使用前进按钮则使用户导航至下一页面，利用　前进或　后退按钮旁的下拉列表框，还可以任意跳转到指定的页面。当然，这些页面都是用户访问过的，它们以栈的形式存储于浏览器的内部。在javascript中，浏览器的这个功能以history对象的形式提供给用户，用于使用代码控制这些...
浏览器的地址栏信息 浏览器的滚动距离 滚动到指定位置回到顶部 开启关闭新的标签页 浏览器历史记录
mx0102的博客
01-17 156
浏览器的地址栏信息 浏览器的属性事件 浏览器的滚动距离 开启关闭新的标签页 浏览器历史记录
vue跳转新页面的时候清除原有的历史记录
w244ang的博客
09-08 7278
let backlen = window.history.length - 2; window.history.go(- backlen); this.$router.replace('/', () => { window.location.reload() }) 因为在刚开始的权限和点击某一操作之后的权限不一样，如果点返回会导致页面404，所以清除之前所有的记录这样就无法返回到之前的页面了 ...
vue 刷新页面的三种方法
欢迎光临本仓鼠的地盘～
03-01 1002
1、location. reload() / this.$router.go(0) 相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好 2、先跳到空白页面，再跳回原页面 （1）新建一个空白页面 reload.vue： （2）需要刷新的页面，先跳转到reload.vue，再跳转回原页面，从而实现刷新（路径上带param的不能用）： 3、provide/inject组合（最优） （1）App.vue添加provide，和data一样，返回一个对象： （2）需要刷新的
history命令 – 显示与管理历史命令记录
鹅不糊涂的博客
05-16 3310
Linux系统中，命令可以记录和管理用户在终端中输入的历史命令记录。本文将介绍命令的语法、实操和使用该命令的多种方法命令的基本语法如下： 以下是一些常用的选项：以下是示例，以说明如何使用命令：显示所有历史命令： 查看最近10个历史命令： 查看最近的10个历史命令，从第5个开始： 清除所有历史记录： 2. 方法之间的区别 命令有多种常见方法，包括：该方法显示最近使用过的历史命令。它可以用来快速查找并重新执行先前键入的命令。 删除特定历史命令 这种方法可以删除历史记录中指定的命令号。要删除具体的
Vue页面刷新常用的4种方法
最新发布
qq_37635012的博客
08-17 4750
在 Vue 中，可以通过 $forceUpdate() 方法来实现某个组件的强制更新，从而实现页面的刷新。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用 $forceUpdate() 方法来强制更新。$router.go(0) 方法只适用于当前路由，如果你希望刷新其他路由对应的页面，需要使用其他方式，如重定向到该页面的路由或者刷新整个应用程序。注意：第二步中触发的事件或者调用的父组件方法，需要在组件的父组件中进行监听或者定义。
vue history模式nginx配置
06-28
### 回答1： 要在Vue中使用history模式，您需要对Nginx进行配置以正确处理路由请求。 首先，您需要在Vue的路由器中启用history模式，可以通过以下方式完成： ``` const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 然后，在Nginx配置文件中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这将确保当Nginx服务器接收到路由请求时，它将返回Vue应用程序的index.html文件，并允许Vue路由器处理请求。 最后，确保重新加载Nginx服务器以使更改生效： ``` sudo service nginx reload ``` 这样就完成了Vue history模式和Nginx的配置。现在，您应该能够使用Vue的路由器进行导航，并且当用户刷新页面或直接访问路由时，Nginx将正确地将请求发送到Vue应用程序。 ### 回答2： Vue是基于组件化开发的JavaScript框架，常用于构建单页面应用(SPA)。Vue提供了路由功能，方便前端开发实现页面之间的路由跳转。其中，Vue的路由模式有两种，一种是hash模式，一种是history模式。在hash模式下，URL中带有#号，如http://localhost/#/home，而在history模式下，URL是真实的路径，如http://localhost/home。在实际开发中，history模式更加友好，更符合我们对URL的期望，但需要特殊的nginx配置。 要在Vue中使用history模式，需要先设置VueRouter的mode属性为history。具体方法如下： ``` javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'history', routes: [...] }) ``` 设置完后，Vue会使用HTML5的History API来实现前端路由。 接下来，我们需要在nginx服务器中进行配置，来支持history模式。nginx是一个开源的高性能Web服务器软件，常被用于作为静态资源服务器和反向代理服务器。我们需要在nginx的配置文件中添加以下内容： ``` nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } } ``` 在这里，我们设置了一个nginx的server块，并监听80端口。location /表示匹配到的所有路径，root指定了网站的根目录，index指定默认的访问页面。try_files语句表示当nginx找不到对应的静态资源时，将会跳转到index.html页面，这就是Vue使用history模式所需的。 同时，为了让Nginx生效，我们需要执行以下命令，重新加载nginx配置：sudo nginx -s reload 总结：通过Vue的history模式，我们可以实现更美观、更友好的URL路径，但需要在nginx服务器中进行配置。通过以上的方法，我们可以轻松实现history模式的nginx配置，使我们可以愉快地在Vue中使用history模式了。 ### 回答3： Vue是一款现代化、轻量级且非常有用的前端框架，可以让开发者迅速地创建高质量的单页应用程序。而Vue Router是Vue框架的官方路由管理器，可以帮助我们处理应用程序中的所有路由。 Vue Router支持两种路由模式：Hash模式和History模式，其中Hash模式就是默认的模式，而History模式则需要对服务器端和Nginx进行一些配置。 当我们使用Vue Router的History模式时，需要确保我们已经在服务器端正确地配置了路由。这样才能确保我们在浏览器中访问特定页面时，服务器能够正确地响应相关路由。 在Nginx中配置Vue Router的History模式非常简单，只需在服务器端的Nginx配置文件中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这段代码的意思是，当请求的URL与文件系统中的文件或目录匹配时，直接返回该文件或目录的内容。如果无法匹配，就返回/index.html中的内容。 这样，当我们在浏览器中访问特定的路由时，Nginx就会返回/index.html的内容，而Vue Router会根据我们的路由配置去渲染对应的组件。这样就能保证Vue Router的History模式正常工作。 总的来说，虽然Nginx的配置比较简单，但是我们还是需要正确地配置以确保Vue Router的History模式能够正常运行。只有这样，我们才能在开发原型和生产环境中使用Vue框架和Vue Router，实现快速、高效的前端开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值