vue使用路由跳转到上一页

this.$router.go(-1)

<template>
<div>
    <button class="btn btn-success" @click="goback()">返回上一页</button>
</div>
</template>
<script>
export default {
  name: "GoBack",
  data () {
    return {
    };
  },
  methods:{
      goback(){
          this.$router.go(-1)
      }
  }
}
</script>
<style lang="css" scoped>
</style>

原文地址:https://www.cnblogs.com/luguankun/p/10662278.html

时间: 2024-11-11 13:47:27

vue使用路由跳转到上一页的相关文章

vue当前路由跳转初步研究

一样闲话少说,直接上问题,如图: 也是消息面板,没想到一个小小的消息面板,碰到这么多坑,惆怅. 就是如果当前路由和跳转路由不一样时,正常跳转没有任何问题.但是如果一样时,就不会跳转了,用了很多方法,比如给router-view加key,beforeRouterLeave,watch路由等都没有效果.这个路由跳转用的是params形式 <router-link :to="{ name:item.route, params:{ messageId:item.rid } }">&

vue相同路由跳转强制刷新该路由组件

在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数: 1 this.$router.push({ 2 path:"/xxx", 3 query:{ 4 t:Date.now(), 5 }, 6 }); 该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建. 在路由容器上绑定key值: 1 <router-view :key="$route.path + $route.query.t"></router-view>

Vue之路由跳转传参,插件安装与配置

路由跳转 this.$router.push('/course'); this.$router.push({name:course}); this.$router.go(-1); //后退一页 this.$router.go(1): // 前进一页 <router-link to = "/course">课程页</router-link> <router-link :to="{name:'course'}"> 课程页 </r

Vue实现路由跳转和嵌套

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 [html] view plain copy<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> <

点击跳转到上一页

总结一下: window.history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 window.history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在; go() 方法可加载历史列表中的某个具体的页面. 该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置.(-1上一个页面,1前进一个页面).或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL.

VUE学习--路由跳转方式||路由跳转携带参数方式||目标路由接受参数方式

跳转方式1:.使用便签跳转, <router-link to="{path:'路由地址',params:{传的数据},query:{传的参数}" >:跳转方式2:导航跳转,{在路由内 (路由对象) router.push({ path:'路径',//具有导航功能 name:‘路由名称’,,//同样具有导航功能 params:{传的数据}, query:{传的参数}"});在组件内 (路由对象)this.$router.push(参数同上); 传参方式1:query

vue+el-table 路由跳转及返回

让table每行都可以实现跳转,给table绑定点击事件 <el-table :data="tableDataCb" style="width: 100%" @row-click="openDialog"> <el-table-column prop="W_NAME" label="名称" align="center" ></el-table-column&

vue 项目路由跳转后显示不同的title

1.在router/index.js的每个路由中配置title 2.在项目中运行命令 npm install vue-wechat-title --save 安装插件(在 package.json文件的dependencies中可以看到已安装 "vue-wechat-title": "^2.0.5") 3.在main.js 中引入并使用 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTi

vue的路由跳转及传参(编程式导航)

1)直接在路由中传参    this.$router.push({ path: `/childPage/${id}`, }) 需要对应路由配置如下: { path: '/childPage/:id', name: 'childPage', component: childPage } 获取参数:this.$route.parames.id 2) 通过路由属性中的name来确定匹配的路由,通过params来传递参数 this.$router.push({ name: 'childPage', pa