Vue Router 的编程式导航：直接控制路由跳转

Vue Router 的编程式导航：直接控制路由跳转

在 Vue Router 中，编程式导航允许你在代码中直接控制路由跳转，而不仅仅是通过 router-link 组件。这种方式在实际开发中非常有用，特别是在需要根据条件动态跳转时。

一、问题引入

假设你正在开发一个应用，包含以下功能：

1. 导航链接：用户可以点击链接跳转到不同的页面。

2. 动态跳转：根据某些条件动态跳转到特定页面。例如鼠标滑过跳转

3. 自动跳转：在特定时间或事件后自动跳转。

那么，如何实现这些功能呢？

二、编程式导航的基本使用

1. router-link 的局限性

router-link 是一个组件，用于创建导航链接。它最终会被渲染为一个 <a> 标签。虽然 router-link 很方便，但它只能用于用户点击跳转的场景。如果需要在代码中动态控制路由跳转，就需要使用编程式导航。

示例：

<template>
  <div>
    <h2>导航区</h2>
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

2. 编程式导航的实现

通过 useRouter，你可以直接在代码中控制路由跳转。useRouter 是 Vue Router 提供的一个 Composition API，用于获取路由器实例。

示例：

<template>
  <div>
    <h2>新闻列表</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <button @click="goToDetail(news.id, news.title)">查看新闻详情</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const newsList = ref([
      { id: '001', title: '十种抗癌食物' },
      { id: '002', title: '如何一夜暴富' },
      { id: '003', title: '万万没想到' },
      { id: '004', title: '好消息！' },
    ]);

    function goToDetail(id, title) {
      router.push({
        path: '/news/detail',
        query: { id, title },
      });
    }

    return { newsList, goToDetail };
  },
};
</script>

在这个例子中，点击按钮会调用 goToNews 方法，该方法通过 router.push 实现路由跳转。router.push可以放对象也可以放字符串，也就是说router-link中的to怎么写，它就能怎么写。

三、编程式导航的高级用法

1. 条件跳转

你可以根据某些条件动态决定是否跳转。

示例：

<template>
  <div>
    <h2>导航区</h2>
    <button @click="goToPersonalCenter">登录成功后跳转到个人中心</button>
    <router-view></router-view>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToPersonalCenter() {
      // 假设登录成功
      const isLoggedIn = true;

      if (isLoggedIn) {
        router.push('/personal-center');
      } else {
        alert('登录失败');
      }
    }

    return { goToPersonalCenter };
  },
};
</script>

2. 自动跳转

你可以使用定时器在特定时间后自动跳转。

示例：

<template>
  <div>
    <h2>首页</h2>
    <p>3 秒后自动跳转到新闻页面</p>
    <router-view></router-view>
  </div>
</template>

<script>
import { onMounted, useRouter } from 'vue';

export default {
  setup() {
    const router = useRouter();

    onMounted(() => {
      setTimeout(() => {
        router.push('/news');
      }, 3000);
    });

    return {};
  },
};
</script>

四、push 和 replace 的区别

• push：生成新的历史记录，用户可以使用浏览器的前进和后退按钮。

• replace：替换当前的历史记录，用户无法使用浏览器的前进和后退按钮。

示例：

<template>
  <div>
    <h2>导航区</h2>
    <button @click="goToNewsWithReplace">查看新闻（替换模式）</button>
    <router-view></router-view>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToNewsWithReplace() {
      router.replace('/news');
    }

    return { goToNewsWithReplace };
  },
};
</script>

五、总结

• router-link：用于用户点击跳转的场景，最终渲染为 <a> 标签。

• 编程式导航：通过 useRouter 在代码中直接控制路由跳转。

• push 和 replace：push 生成新的历史记录，replace 替换当前的历史记录。

编程式导航在实际开发中非常有用，特别是在需要根据条件动态跳转时。