vue.js 怎么刷新当前页面? 下面本篇文章就来给大家介绍一下 vue.JS 刷新当前页面的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
Vue.JS 的路由跳转很强大, 类似 Ajax 的局部刷新, 路由跳转时候页面是不刷新的, 刷新当前页面的功能不建议用, 但是有的时候确实需要刷新当前页面来实现某些需求, 这个时候, 我们有三 种方法可以实现.
第一种就是传统的的方法
Windows.location.reload();
第二种是通过 vue.JS 的路由来实现
- this.$router.go(0)
- <template>
- <section>
- <h1 ref="hello">{{ value }}</h1>
- <el-button type="danger" @click="get"> 点击 </el-button>
- </section>
- </template>
- <script>
- export default {
- data() {
- return {
- value: 'Hello World ~'
- };
- },
- methods: {
- get() {
- this.$router.go(0);
- // Windows.location.reload();
- }
- },
- mounted() {
- },
- created() {
- }
- }
- </script>
第三种是使用浏览器自带的刷新功能, Windows.history.go(0), 这里的 Windows 可以省略不写
- history.go(0);
- <template>
- <section class="p-10">
- <el-button type="danger" @click="back"> 返回 </el-button>
- </section>
- </template>
- <script>
- export default {
- data() {
- return {
- };
- },
- methods: {
- back() {
- history.go(0);
- }
- }
- };
- </script>
既然使用 vue 来做前端了, 那么这里就推荐使用第二种方式吧~
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17057.html