vue3路由的replace属性（四）
一、 replace 属性
作用：控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史记录有两种写入方式：
push和replace：push是追加历史记录（默认值）。replace是替换当前记录（不会留下可后退的历史记录）。
开启
replace模式：在<RouterLink>上添加replace属性即可。
<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属性。
js
{ path: '/', redirect: '/about' }- 如果不配置重定向，当用户访问根路径
/时，没有匹配的路由组件，页面可能显示空白或无法展示内容。 - 配置重定向后，访问根路径会自动跳转到指定的路径（例如
/home），URL 也会随之改变。
效果对比：
未配置重定向时，访问localhost:5173没有组件展示：
配置重定向到/home后，访问根路径自动跳转，URL 变为localhost:5173/home：
补充说明
redirect也可以使用命名路由的写法：redirect: { name: 'Home' }。- 重定向是客户端路由层面的跳转，不会发送 HTTP 请求，只是前端路由的替换。