vue路由跳转router-link清除历史记录的三种方式(总结)

目录
  • 路由跳转router-link清除历史记录
    • 官方文档提供了如下三种方式
  • vue跳转后不记录历史记录

路由跳转router-link清除历史记录

1.在vue项目中说起路由跳转，我们最先想到的就是router-link标签以及this.$router.push函数。

router-link和this.\$router.push的实现原理是一样的，在点击router-link时，内部调用的就是this.$router.push。

2.this.\$router.push这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

那在我们使用路由跳转的时候如何去掉历史记录呢？

官方文档提供了如下三种方式

1.使用router-link标签时去掉历史记录：加上replace属性

<router-link to='/project_selection' replace class='btn_none' tag="a">项目列表</router-link>

2.使用this.\$router.push标签时去掉历史记录：加上replace属性，默认值为false

this.$router.push({path: '/project_selection',replace:true})

3.使用this.\$router.replace标签时去掉历史记录

this.$router.replace({path: '/project_selection'})

所有内容源自于官网：vue路由核心插件

vue跳转后不记录历史记录

vue路由跳转一般情况下是使用push，

 this.$router.push({
                path: "/testTeam/testTeam",
              });

若是特殊需求，页面跳转后不记录到历史记录中，将push改为replace即可

this.$router.replace({path: '/project_selection'})

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

赞 (0)

相关推荐

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解Vue router路由

    详解Vue router路由

    目录 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件 总结 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 例如像三级目录 ,每次写都需要带上一二级目录,比较麻烦,采用命名路由可以用name直接找到 6.路由的params参数 1)在配置路由的时候需要先声明接收params参数,即先占位 2) 7.路由的pro

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

  • Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监

  • 在vue项目中(本地)使用iconfont字体图标的三种方式总结

    在vue项目中(本地)使用iconfont字体图标的三种方式总结

    目录 vue项目中(本地)使用iconfont字体图标 开始使用 vue项目中(本地)使用iconfont字体图标 这里有使用前的准备和三种使用方式介绍,参考这里 还有 vue中手动封装iconfont组件(三种引用方式的封装) 开始使用 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错 npm in

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • vue路由跳转传参数的方法

    vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 1. path -> 是要跳转的路由路径

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a>    getGetMyPortfolioById(vals) {      getMyPortfolioById({       }).then(response = >{          const routerdata = this.$router.resolve({             

  • Vue路由跳转的4种方式小结

    目录 1. 标签路由 router-link 2.编程式路由 this.$router.push() 3.this.$router.replace()(与this.$router.push()类似) 4.this.$router.go(n) 5.this.$router.push().this.$router.replace().this.$router.go(n)区别 router-view 实现路由内容的地方,引入组件时写到需要引入的地方,需要注意的是,使用vue-router控制路由则必须

  • Vue路由跳转方式区别汇总（push，replace，go）

    目录 声明式导航router-link 1. 不带参数 2.带参数 编程式导航 1.this.$router.push 2.this.$router.replace 3.this.$router.go(n) 总结区别: 在浏览器中,点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击 a标签链接.vue项目中点击router-link标签链接都属于声明式导航.在浏览器中,调用API方法实现导航的方式,叫做编程式导航.例如:普通网页中调用location.href跳转到新页面的方式,属于编

随机推荐