vue跳转后不记录历史记录的问题
vue跳转后不记录历史记录
vue路由跳转一般情况下是使用push,
this.$router.push({ path: "/testTeam/testTeam", });
若是特殊需求,页面跳转后不记录到历史记录中,将push改为replace即可
this.$router.replace({path: '/project_selection'})
vue-router回退不记录历史
场景说明
对于单页应用来说,经常会有登录后访问某个页面的场景。比如
/index -> /login -> /page1
但是在page1返回上一页时,会返回到登录页。回退路径为
/page1-> /login -> /index
因此需要进行跳过登录页的历史记录处理。
处理方案
1.router-link + history
<template> login页 <router-link replace to="/page1">登录后访问page1</router-link> </template>
此时在page1页的回退路径为
/page1 -> /index
2.编程式跳转
<template> login页 <button @click="replaceJump">登录后访问page1</button> </template> <script setup lang='ts'> import {useRouter} from 'vue-router' const router = useRouter(); // 传递全路径跳转 const replaceJump = ()=>{ router.replace('/page1') } </script> <style> </style>
结果同上。
其他api跳转
此外,router对象还有其他跳转api使用说明如下
/** * Go back in history if possible by calling `history.back()`. Equivalent to * `router.go(-1)`. */ back(): ReturnType<Router['go']>; /** * Go forward in history if possible by calling `history.forward()`. * Equivalent to `router.go(1)`. */ forward(): ReturnType<Router['go']>; /** * Allows you to move forward or backward through the history. Calls * `history.go()`. * * @param delta - The position in the history to which you want to move, * relative to the current page */ go(delta: number): void;
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue的index.html中获取环境变量和业务判断图文详解
这篇文章主要给大家介绍了关于vue的index.html中获取环境变量和业务判断的相关资料,对vue来说index.html是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板,需要的朋友可以参考下2023-09-09vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
这篇文章主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧2018-06-06Vue 2阅读理解之initRender与callHook组件详解
这篇文章主要为大家介绍了Vue 2阅读理解之initRender与callHook组件详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
最新评论