当前位置：首页 > news >正文

相对路径跳转和绝对路径跳转有什么区别？

news 来源：原创 2025/4/28 17:36:29

在 Vue 3 中使用路由跳转时，相对路径跳转和绝对路径跳转在使用方式、适用场景等方面存在明显区别，以下为你详细介绍：

定义

绝对路径跳转：指的是使用完整的路径来进行路由导航，路径以 / 开头，无论当前处于哪个路由，都会直接跳转到该完整路径对应的页面。
相对路径跳转：是基于当前路由的路径来进行跳转，不使用 / 开头，它会根据当前所在的路由位置来确定最终跳转的目标。

语法示例

假设当前路由为 /parent/child，有以下路由配置：

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      },
      {
        path: 'sibling',
        component: Sibling
      }
    ]
  },
  {
    path: '/other',
    component: Other
  }
];

绝对路径跳转

<template>
  <button @click="goToOther">跳转到 /other</button>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const goToOther = () => {
  router.push('/other');
};
</script>

这里无论当前处于哪个路由，点击按钮都会直接跳转到 /other 路径对应的页面。

相对路径跳转

<template>
  <button @click="goToSibling">跳转到 sibling</button>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const goToSibling = () => {
  router.push('sibling');
};
</script>

由于当前路由是 /parent/child，使用相对路径 sibling 跳转时，会跳转到 /parent/sibling 路径对应的页面。

区别

跳转目标确定性

绝对路径跳转：目标明确，不受当前路由位置的影响。无论在哪个页面触发跳转，都会精确地跳转到指定的完整路径页面。例如，始终能跳转到 /about 页面，不管当前处于 /home 还是 /products。
相对路径跳转：目标依赖于当前路由。同样的相对路径在不同的当前路由下，会跳转到不同的页面。比如在 /parent/child 路由下使用 sibling 跳转和在 /another/route 下使用 sibling 跳转，结果是不同的。

灵活性与可维护性

绝对路径跳转：在代码中明确指定跳转目标，便于理解和维护，尤其在项目规模较大、路由结构复杂时，能清晰地知道跳转的目的地。但如果路由配置发生变化，涉及到绝对路径的跳转代码可能需要相应修改。
相对路径跳转：在处理嵌套路由时非常灵活。当需要在同一父路由下的子路由之间进行切换时，使用相对路径可以减少代码中对完整路径的依赖，提高代码的可维护性。但相对路径的含义依赖于当前路由，可能会增加代码的理解难度。