小满Router（第三章-历史记录）

原创于 2022-03-19 11:15:32 发布 · 6.4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

vue-router 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了Vue Router中的replace方法，它用于页面跳转但不增加历史记录，实现平滑的页面替换。通过`<router-link replace>`或在JS中调用`router.replace()`实现。同时，还讲解了如何利用`router.go()`进行历史记录的前进和后退。在处理页面导航和历史管理时，replace方法能有效避免用户通过浏览器的回退按钮返回之前的页面状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

replace的使用

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；

router-link 使用方法

   <router-link replace to="/">Login</router-link>
   <router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

编程式导航

  <button @click="toPage('/')">Login</button>
  <button @click="toPage('/reg')">Reg</button>

import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = (url: string) => {
  router.replace(url)
}

横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

 <button @click="next">前进</button>
 <button @click="prev">后退</button>

const next = () => {
  //前进 数量不限于1
  router.go(1)
}

const prev = () => {
  //后退
  router.back()
}