vue中$router.back()和$router.go()的用法

目录
  • $router.back()和$router.go()
  • vue点击按钮跳转页面总结 router.push router.replace router.go
    • 总结一下在Vue里面跳转页面的方法
    • 解析router.push 和 router.replace的区别

$router.back()和$router.go()

返回上一页，有两种方法：

1. $router.back()

2. $router.go()

使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。

  • go(-1):原页面表单中的内容会丢失；
  • this.$router.go(-1):后退+刷新；
  • this.$router.go(0):刷新；
  • this.$router.go(1):前进；
  • history.go(-1):后退+刷新；
  • history.go(1):前进；
  • back():原页表表单中的内容会保留；
  • this.$router.back()：后退
  • this.$router.back(0) 刷新
  • this.$router.back(1) 前进
  • history.back() 后退
  • history.back(0) 刷新
  • history.back(1) 前进

vue点击按钮跳转页面总结 router.push router.replace router.go

总结一下在Vue里面跳转页面的方法

首先是vue提供的router-link，使用后再页面里会转换为a标签

<router-link to="/test">go home</router-link>

使用函数进行任意页面跳转

普通跳转

<button @click="jump('/test')">Click Me</button>    // 这里进行设置要跳转的路由
methods: {
        jump (path) {
            this.$router.replace(path)
        }
        
        // 或者
        jump (path) {
            this.$router.push({path: path})
        }
    }

带参数跳转

<button @click="jump('/test')">Click Me</button>    // 这里进行设置要跳转的路由
methods: {
        jump (path) {
            this.$router.push({path: `${path}?a=1`})
        }
        
        // 或者
        jump (path) {
            this.$router.push({path: path, query:{a:123}})
        }
    }

前进

@click="$router.go(1)"

后退

@click="$router.back()"
    // 或者
@click="$router.go(-1)"

刷新当前页面

@click="$router.go(0)"
    // 或者
window.location.reload()
    // 或者
history.go(0)

解析router.push 和 router.replace的区别

先说结论：router.push会在浏览器历史纪录里面添加一条记录，router.replace不会在浏览器的历史记录里面添加信息。也就是通过router.push跳转的页面能够返回上一页。这里的上一页指的是跳转之前的那一页

验证：首先打开一个新的vue项目，把鼠标指针放在浏览器左上角的回退按钮并按住左键，能够看到目前浏览器历史记录除了默认新开打的一个页面没有任何其他vue路由信息

使用 this.$router.replace(path)这个方法跳转后，再次点击，可以看到路由跳转后，历史纪录里面跟新打开的项目一样。

说明使用router.replace不会往浏览器历史记录里添加信息。并且点击返回按钮也是返回到空页面，并不会返回到vue的首页

然后使用this.$router.push(path)方法，点击跳转后能够看到历史记录里面多了一条记录

点击返回后，也能够返回到首页。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue Router4路由导航守卫实例全面解析

    目录 前言 一.什么是导航守卫 二.全局前置守卫 可选的第三个参数 next 三.全局解析守卫 四.全局后置钩子 五.路由独享的守卫 六.组件内的守卫 可用的配置 API 使用组合 API 七.完整的导航解析流程 前言 在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫

  • vue-router如何实时动态替换路由参数(地址栏参数)

    目录 实时动态替换路由参数(地址栏参数) 应用场景 用法如下 replace()和push() 的区别 动态替换路由-Url参数 安装webpack-merge 引入包 操作参数 实时动态替换路由参数(地址栏参数) 应用场景 例如: 页面上有多个tab,点击不同的tab,跳转到不同的页面上去,再次返回的时候,需要知道上次点击的是哪个tab,这样不用存缓存,直接改路由参数,然后直接返回就可以了: 用法如下 import merge from 'webpack-merge'; //如果路由没有参数n

  • vue项目如何使用$router.go(-1)返回时刷新原来的界面

    目录 使用$router.go(-1)返回时刷新原来的界面 问题如下 解决方法1 解决方法2 this.$router.back()与this.$router.go(-1)返回上一页的区别 使用$router.go(-1)返回时刷新原来的界面 在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,..... 问题如下 界面1 : 界面2使用$router.go(-1)返回上一次的界面 由于使用$rou

  • vue如何动态修改$router参数

    目录 vue动态修改$router参数 动态修改router路由所带参数 vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getURLParameters = (url) =>   (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(     (a, v) => (       (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf

  • vue-router路由跳转问题 replace

    目录 vue-router路由跳转replace vue router路由跳转方法概述 一.概述 二.跳转方法 三.路由中params和query的区别 vue-router路由跳转replace 1.push 常用 this.$router.push() 2.replace 不会在浏览器得历史记录中加,只会替代掉最后一条记录(这个比较好用) this.$router.replace() 3.go this.$router.go() this.$router.back(-1) vue route

  • vue中$router.back()和$router.go()的用法

    目录 $router.back()和$router.go() vue点击按钮跳转页面总结 router.push router.replace router.go 总结一下在Vue里面跳转页面的方法 解析router.push 和 router.replace的区别 $router.back()和$router.go() 返回上一页,有两种方法: 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同,都是返回原

  • 基于axios在vue中的使用

    基于axios在vue中的使用

    目录 一.Axios是什么 二.Axios有哪些特性 三.Axios浏览器支持 四.安装 1.使用 npm 2.使用 bower 3.使用 cdn 五.用法(vue项目已搭建) 1. Axios基础用法(get.post.put 等请求方法) 2. Axios进阶用法(实例.配置.拦截器.取消请求等) 3.Axios进一步封装,在项目中的实际应用 一.Axios是什么 Axios是一个基于promise的HTTP库(类似于jQuery的Ajax,用于HTTP请求) 可以用于浏览器和node.js

  • vue+webpack实现异步加载三种用法示例详解

    1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • vue进行图片的预加载watch用法实例讲解

    watch应用场景 我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片都加载出来的时候,我们才把主页面给显示出来,再进行一些ajax请求,或者逻辑操作 那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求,那watch再适合不过了,如果用computed的话那你连实现都实现不了,只有用watch监听 <template> <div v-show=show> <img src="https://img.alicdn.co

  • Vue 中 filter 与 computed 的区别与用法解析

    Vue 中 filter 与 computed 的区别与用法解析

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果

  • vue 内联样式style中的background用法说明

    在我们使用vue开发的时候 有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意 在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定要加引号拼接 :style = ' { backgroundImage : " url ( " + item.img + " ) " } ' 完事! 补充: 好像还可以这样写 <div :style=" 'background-image' : ' url(

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

随机推荐