如何在 Vue Router 中实现路由跳转？

咱可以把 Vue Router 想象成一个超棒的城市导航系统，而路由跳转就像是在这个城市里从一个地方去到另一个地方。下面给你说说在这个导航系统里实现“移动”的几种办法。

1. 用 <router - link> 组件，就像坐公交车

基本情况

<router - link> 就像是公交车站的站牌，上面写着要去的地方，你只要“站”在这个站牌旁边（在页面里写好这个组件），点击一下，就会被送到对应的地方。它其实最后会变成网页里常见的链接（<a> 标签）。

具体例子

<template>
  <div>
    <!-- 这就像去城市的中心广场 -->
    <router-link to="/">去首页</router-link>
    <!-- 这是去城市的博物馆 -->
    <router-link to="/about">去关于我们页</router-link>
    <!-- 这是去一个编号的房子，编号会变 -->
    <router-link :to="`/user/${userId}`">去用户详情页</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 假设这个房子编号是 1
const userId = ref(1);
</script>
复制

解释

• 对于那些固定的地方（静态路由），比如首页和关于我们页，直接在 to 属性里写好要去的地方名字（路径字符串）就行。
• 要是去那种编号会变的地方（动态路由），就得用 JavaScript 来组合路径，就像这里根据不同的 userId 去不同的用户详情页。

2. 用 router.push 和 router.replace 方法，就像自己开车

基本情况

这就好比你自己开着车，想什么时候走、去哪里都能自己决定，特别灵活。在 JavaScript 代码里就能控制要去的地方，适合那种有特殊情况才要去某个地方的时候，比如完成一个任务后要跳转到另一个页面。

具体例子

<template>
  <div>
    <!-- 点这个按钮就开车去首页 -->
    <button @click="goToHome">去首页</button>
    <!-- 点这个按钮就开车去用户详情页 -->
    <button @click="goToUserDetail">去用户详情页</button>
  </div>
</template>

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

// 拿到这个城市的导航仪
const router = useRouter();
// 还是那个房子编号
const userId = ref(1);

const goToHome = () => {
  // 开着车去城市中心广场
  router.push('/');
};

const goToUserDetail = () => {
  // 开着车去那个编号的房子
  router.push({
    name: 'UserDetail',
    params: { id: userId.value }
  });
};
</script>
复制

解释

• router.push：就像你开车出门，会在地图的行程记录里多一条新的路线，你还能按返回键回到上一个地方。你可以直接告诉导航仪要去的地方名字（字符串路径），也可以用一个小纸条（路由对象）写清楚具体信息，像地方名字、编号啥的。
• router.replace：和 router.push 差不多，但它不会在行程记录里多一条路线，而是把当前这条路线给换了，你按返回键就回不到被换掉的地方了。比如：

router.replace('/about');复制

3. 在路由导航守卫里跳转，就像过检查站

基本情况

路由导航守卫就像是城市里的检查站，在你去一个地方之前，会先检查一些条件。要是条件不满足，就会把你送到别的地方去。

具体例子

// 这是城市导航仪的设置文件
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
// 这是一个大的检查站，每次出发前都会检查
router.beforeEach((to, from, next) => {
  // 假设你没带身份证
  const isLoggedIn = false; 
  if (to.name === 'About' && !isLoggedIn) {
    // 没带身份证还想去博物馆，就把你送回中心广场
    next('/');
  } else {
    // 条件都满足，就让你正常走
    next();
  }
});
 
export default router;复制

解释

• router.beforeEach 这个大检查站，每次你要去一个新地方之前都会启动。
• to 就是你要去的地方信息，from 是你现在所在的地方信息，next 就像是检查站的放行指令。要是符合某些条件，就用 next 把你送到别的地方；要是条件都满足，就用 next() 让你正常去想去的地方。

通过这几种办法，你就能在 Vue Router 这个城市导航系统里自由地从一个页面“移动”到另一个页面啦。
在 Vue Router 中，router.push 方法是实现编程式导航的重要手段，它允许你在 JavaScript 代码里动态地控制路由跳转，就像在一个虚拟的城市中自由地选择前往不同的地点。下面为你详细介绍它的使用方式：

1. 引入路由实例

在使用 router.push 之前，你得先获取到路由实例。在 Vue 3 的组合式 API 里，可以使用 useRouter 函数来获取。

<template>
  <!-- 模板内容 -->
</template>

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

// 获取路由实例，就像拿到了城市的导航地图
const router = useRouter();
</script>

<style scoped>
/* 样式 */
</style>
复制

2. 基本使用：传入路径字符串

这是 router.push 最直接的使用方式，你只需传入目标路由的路径字符串，就像告诉导航地图你要去的具体地址。

<template>
  <div>
    <button @click="goToHome">前往首页</button>
  </div>
</template>

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

const router = useRouter();

const goToHome = () => {
  // 传入路径字符串，实现跳转到首页
  router.push('/');
};
</script>

<style scoped>
/* 样式 */
</style>
复制

在这个例子中，当用户点击“前往首页”按钮时，goToHome 函数会被调用，router.push('/') 会让应用跳转到根路径对应的页面，也就是首页。

3. 动态路由跳转：传入包含 params 的路由对象

如果你的路由配置里有动态参数（比如用户 ID、文章 ID 等），可以通过传入包含 params 属性的路由对象来实现动态路由跳转。

路由配置示例

import { createRouter, createWebHistory } from 'vue-router';
import UserDetail from '../views/UserDetail.vue';
 
const routes = [
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: UserDetail
  }
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
export default router;复制

组件中使用 router.push 跳转

<template>
  <div>
    <button @click="goToUserDetail">前往用户详情页</button>
  </div>
</template>

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

const router = useRouter();
const userId = ref(1);

const goToUserDetail = () => {
  // 传入包含 params 的路由对象，实现动态路由跳转
  router.push({
    name: 'UserDetail',
    params: { id: userId.value }
  });
};
</script>

<style scoped>
/* 样式 */
</style>
复制

这里的路由配置里 :id 是动态参数，在组件中通过 router.push 传入包含 name（路由名称）和 params（动态参数对象）的路由对象，就可以根据不同的 userId 跳转到对应的用户详情页。

4. 携带查询参数：传入包含 query 的路由对象

有时候你需要在跳转时携带一些额外的信息，比如搜索关键词、筛选条件等，这时候可以使用 query 属性。

<template>
  <div>
    <button @click="search">搜索</button>
  </div>
</template>

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

const router = useRouter();
const searchKeyword = ref('Vue.js');

const search = () => {
  // 传入包含 query 的路由对象，携带查询参数跳转
  router.push({
    path: '/search',
    query: { keyword: searchKeyword.value }
  });
};
</script>

<style scoped>
/* 样式 */
</style>
复制

在这个例子中，点击“搜索”按钮后，会跳转到 /search 路径，并携带 keyword 查询参数，在目标页面可以通过 $route.query.keyword 来获取这个参数的值。

5. 路由跳转后可进行的操作

router.push 方法返回一个 Promise，你可以利用这个特性在路由跳转完成后执行一些操作，比如显示提示信息、进行数据加载等。

<template>
  <div>
    <button @click="goToHome">前往首页</button>
  </div>
</template>

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

const router = useRouter();

const goToHome = async () => {
  try {
    // 执行路由跳转
    await router.push('/');
    // 跳转成功后显示提示信息
    console.log('已成功跳转到首页');
  } catch (error) {
    // 跳转失败时处理错误
    console.error('路由跳转失败:', error);
  }
};
</script>

<style scoped>
/* 样式 */
</style>
复制

通过 await 等待 router.push 的 Promise 完成，然后根据结果进行相应的处理，增强了代码的健壮性。

综上所述，router.push 方法非常灵活，你可以根据不同的需求选择合适的方式来实现路由跳转，为用户提供流畅的导航体验。
咱接着拿之前城市导航系统的例子来讲，除了像开车直接去新地方（router.push）这种方式，Vue Router 里还有其他几种“出行方式”来帮你在不同页面间切换。

1. router.replace：坐“替换专车”

• 功能特点：router.replace 就像你坐了一辆很特别的专车，它不会在你的出行记录里新增一条行程。比如说你本来计划去 A 商场，结果上了这辆专车后，司机直接把你送到了 B 商场，并且把你原本去 A 商场的行程记录给替换成了去 B 商场。之后你想往回走的时候，不会回到原本计划去的 A 商场，而是去再上一次你去过的地方。
• 使用例子：

<template>
  <div>
    <!-- 点这个按钮就坐“替换专车”去关于页面 -->
    <button @click="replaceToAbout">去关于页面</button>
  </div>
</template>

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

// 拿到城市导航仪
const router = useRouter();

const replaceToAbout = () => {
  // 坐上“替换专车”去关于页面
  router.replace('/about');
};
</script>
复制

这里点击按钮后，就像你坐上了“替换专车”，直接到了 /about 这个地方，而且原本的行程记录被替换了。

2. router.go：坐“时光穿梭巴士”

• 功能特点：router.go 就像是一辆时光穿梭巴士，你可以告诉司机往前开几站或者往后开几站。正数就代表往前开，负数就代表往后开。比如你想去之前去过的某个地方，就告诉司机往后开几站；要是想去接下来计划去的地方，就告诉司机往前开几站。
• 使用例子：

<template>
  <div>
    <!-- 点这个按钮就坐“时光穿梭巴士”回到上一站 -->
    <button @click="goBack">回上一站</button>
    <!-- 点这个按钮就坐“时光穿梭巴士”去下一站 -->
    <button @click="goForward">去下一站</button>
  </div>
</template>

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

// 拿到城市导航仪
const router = useRouter();

const goBack = () => {
  // 告诉司机往后开一站
  router.go(-1); 
};

const goForward = () => {
  // 告诉司机往前开一站
  router.go(1); 
};
</script>
复制

点击“回上一站”按钮，就像跟司机说往后开一站，回到上一个去过的地方；点击“去下一站”按钮，就像跟司机说往前开一站，去接下来计划去的地方。

3. router.back：坐“返程巴士”

• 功能特点：router.back 其实就是 router.go(-1) 的另一个名字，就像这辆“时光穿梭巴士”专门有一个返程的线路，你只要上了这辆“返程巴士”，它就会直接把你送回上一个去过的地方。
• 使用例子：

<template>
  <div>
    <!-- 点这个按钮就坐“返程巴士”回去 -->
    <button @click="backToPrevious">回上一个地方</button>
  </div>
</template>

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

// 拿到城市导航仪
const router = useRouter();

const backToPrevious = () => {
  // 坐上“返程巴士”
  router.back();
};
</script>
复制

点击按钮后，就像你上了“返程巴士”，直接回到了上一个去过的地方。

4. router.forward：坐“前进巴士”

• 功能特点：router.forward 是 router.go(1) 的别名，它就像是“时光穿梭巴士”的前进线路。你上了这辆“前进巴士”，它就会把你送到接下来计划去的地方。
• 使用例子：

<template>
  <div>
    <!-- 点这个按钮就坐“前进巴士”去下一个地方 -->
    <button @click="forwardToNext">去下一个地方</button>
  </div>
</template>

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

// 拿到城市导航仪
const router = useRouter();

const forwardToNext = () => {
  // 坐上“前进巴士”
  router.forward();
};
</script>
复制

点击按钮后，就像你上了“前进巴士”，前往下一个计划去的地方。

通过这几种不同的“出行方式”，你可以在 Vue Router 这个城市里更灵活地从一个页面“移动”到另一个页面啦。