vue3路由的replace属性（四）

一、 replace 属性

作用：控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史记录有两种写入方式：push和 replace：
- push是追加历史记录（默认值）。
- replace是替换当前记录（不会留下可后退的历史记录）。
开启 replace 模式：在 <RouterLink> 上添加 replace 属性即可。

vue 复制代码

<RouterLink replace .......>News</RouterLink>

以下示例为 About 组件添加了 replace 属性：

复制代码

<div class="navigate">
  <RouterLink to="/home" active-class="active">首页</RouterLink>
  <RouterLink :to="{ name: 'News' }" active-class="active">新闻</RouterLink>
  <RouterLink replace :to="{ path: '/about' }" active-class="active">关于</RouterLink>
</div>

效果说明：

点击首页和新闻时，浏览器可以正常前进和后退（因为使用默认的 push 模式）。
点击关于时，由于使用了 replace 模式，当前历史记录被替换，因此无法通过浏览器的前进/后退按钮返回到该页面。

如下图所示：

1.1. 编程式导航

在 Vue Router 中，除了使用 <RouterLink> 声明式导航，还可以使用 useRouter 提供的 push 和 replace 方法进行编程式导航。

注意：在 Vue 3 的组合式 API 中，$route 和 $router 被替换为 useRoute() 和 useRouter() 这两个 hooks。

示例：添加按钮实现编程式导航

目标效果（添加三个按钮，点击后跳转到对应详情）：

完整代码示例（News.vue）：

复制代码

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="role in roleList" :key="role.id">
        <button @click="checkDetails(role)">查看详情</button>
        <RouterLink :to="{ name: 'Rolenews', params: { id: role.id, skill: role.skill } }">
          {{ role.role }}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView } from 'vue-router'
import { useRouter } from 'vue-router'

const router = useRouter()

interface RoleImpl {
  id: number
  role: string
  skill: string
}

function checkDetails(role: RoleImpl) {
  // 使用 push 进行跳转（可前进后退）
  router.push({ name: 'Rolenews', params: { id: role.id, skill: role.skill } })
  // 也可以使用 replace（不可前进后退）
  // router.replace({ name: 'Rolenews', params: { id: 1, skill: '后仰跳投' } })
}

const roleList = reactive([
  { id: 1, role: '老大', skill: '后仰跳投' },
  { id: 2, role: '库里', skill: 'logo三分' },
  { id: 3, role: '詹姆斯', skill: '罚球线暴扣' },
])
</script>

<style scoped>
/* 样式略 */
</style>

关键点说明

在 <li> 内部，可以通过 v-for 的 role 变量获取每一项的数据。
使用 useRouter() 获取路由实例，然后调用 push 或 replace 方法进行跳转。
为 checkDetails 函数的参数限定类型（RoleImpl 接口），避免使用 any，提高代码健壮性。
push 和 replace 方法接收的参数与 <RouterLink> 的 to 属性写法完全一致（例如对象形式 { name, params }）。
push 会添加历史记录，支持浏览器的后退/前进；replace 不会添加历史记录，直接替换当前条目。

1.2. 重定向

作用：将特定的路径重新定向到另一个已有路由。常用于设置默认首页或处理 404 之前的默认跳转。
具体编码：在路由配置中添加 redirect 属性。

复制代码

{
  path: '/',
  redirect: '/about'
}

如果不配置重定向，当用户访问根路径 / 时，没有匹配的路由组件，页面可能显示空白或无法展示内容。
配置重定向后，访问根路径会自动跳转到指定的路径（例如 /home），URL 也会随之改变。

效果对比：

未配置重定向时，访问 localhost:5173 没有组件展示：

配置重定向到 /home 后，访问根路径自动跳转，URL 变为 localhost:5173/home：

补充说明

redirect 也可以使用命名路由的写法：redirect: { name: 'Home' }。
重定向是客户端路由层面的跳转，不会发送 HTTP 请求，只是前端路由的替换。