ChatGPT3.5

在 Vue 3 中进行路由跳转可以通过使用 Vue Router 的 router-link 组件或者在组件内部通过编程式导航实现。下面是两种常见的路由跳转方法示例：

1. 使用 router-link 组件：

<template>
  <div>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

在上面的示例中，当用户点击 “Go to About” 时，会跳转到路径 /about。

1. 使用编程式导航：

<template>
  <div>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

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

export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter();

    const goToAbout = () => {
      router.push('/about');
    };

    return {
      goToAbout
    };
  }
});
</script>

在上面的示例中，当用户点击按钮时，会执行 goToAbout 方法进行路由跳转到 /about 路径。

无论使用哪种方法，都需要确保在 Vue Router 的路由配置中正确定义了目标路径，以及对应的组件。例如，在前面的示例中，需要在路由配置中添加：

const routes = [
  {
    path: '/about',
    component: About
  }
];

这样在点击路由链接或执行编程式导航时，Vue Router 就能正确找到并渲染对应的组件。

通义千问

Vue3 中进行路由跳转通常有以下几种方法：

1. 使用 <router-link> 组件

在模板中，通过 <router-link> 组件来创建一个链接，点击后会自动触发路由跳转。这种方式适用于视图中的静态链接。

<template>
  <router-link to="/target-route">点击跳转到目标页面</router-link>
</template>

属性 to 接收目标路由的路径，可以是字符串或对象。例如：

<!-- 字符串形式 -->
<router-link to="/users/123">用户详情</router-link>

<!-- 对象形式，可以传递查询参数和/或命名路由参数 -->
<router-link :to="{ path: '/users', query: { id: 123 } }">用户列表</router-link>
<router-link :to="{ name: 'UserProfile', params: { userId: 123 } }">用户个人主页</router-link>

2. 在 setup() 函数中使用 useRouter 钩子

对于需要在逻辑中动态执行路由跳转的情况，如响应按钮点击事件等，可以在 setup() 函数中引入 useRouter 钩子，并调用其提供的 push() 方法。

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

function handleButtonClick() {
  const router = useRouter();
  router.push('/target-route');
}

// 或者传递参数
function navigateToUserProfile(userId) {
  const router = useRouter();
  router.push({
    name: 'UserProfile',
    params: { userId },
  });
}
</script>

<template>
  <button @click="handleButtonClick">跳转到目标页面</button>
</template>

3. 使用编程式导航（非 setup() 函数）

如果您的项目尚未完全采用 <script setup> 语法糖，或者您在某个类组件或选项式组件中需要进行路由跳转，可以这样操作：

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

export default {
  methods: {
    handleButtonClick() {
      const router = this.$router;
      router.push('/target-route');
    },
  },
};
</script>

<template>
  <button @click="handleButtonClick">跳转到目标页面</button>
</template>

请注意，Vue3 中不再推荐直接访问 $router 实例（即 this.$router），而是推荐使用 useRouter() 钩子函数。但在非 setup() 语法或传统选项式组件中，直接访问 $router 仍然是可行的。

总结起来，Vue3 中进行路由跳转主要依赖于 <router-link> 组件和 useRouter 钩子提供的 push() 方法。选择合适的方法取决于具体的使用场景和组件结构。