vue3路由跳转

在 Vue 3 中，路由跳转通常是通过 Vue Router 实现的。Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，使构建单页面应用变得易如反掌。

下面是一些在 Vue 3 中使用 Vue Router 进行路由跳转的基本步骤：

1. 安装 Vue Router

如果你还没有安装 Vue Router，你可以通过 npm 或 yarn 来安装它：

npm install vue-router@4  
# 或者  
yarn add vue-router@4

请注意，Vue 3 需要与 Vue Router 4 版本一起使用。

1. 创建路由配置

在你的项目中，你需要定义一个或多个路由配置。这通常在 router/index.js 或类似的文件中完成：

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, // (缩写) 相当于 routes: routes  
});  
  
export default router;

1. 在 Vue 应用中使用路由

在你的主 Vue 应用文件中（通常是 main.js 或 main.ts），你需要安装路由实例：

import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router';  
  
const app = createApp(App);  
  
app.use(router);  
  
app.mount('#app');

1. 进行路由跳转

在 Vue 组件中，你可以使用 router-link 组件进行声明式导航，或者使用 $router 实例进行编程式导航。

声明式导航 (router-link)

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

编程式导航 ($router)

在 Vue 组件的方法或生命周期钩子中，你可以使用 $router 实例进行编程式导航：

<template>  
  <button @click="goToAbout">Go to About</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    goToAbout() {  
      this.$router.push({ name: 'About' }); // 使用路由名称  
      // 或者  
      this.$router.push('/about'); // 使用路径  
    },  
  },  
};  
</script>

$router.push 方法用于导航到一个新的路由，它接受一个路由位置对象或者一个字符串路径作为参数。你还可以使用 $router.replace 方法来替换当前路由，而不是添加一个新的历史记录条目。

这就是在 Vue 3 中使用 Vue Router 进行路由跳转的基本流程。你可以根据项目的具体需求进一步定制路由配置，例如添加嵌套路由、重定向、路由守卫等高级功能。

<script setup>中编程式导航

在 Vue 3 的 <script setup> 语法中，编程式导航通常通过 useRouter 钩子来实现。useRouter 钩子提供了对路由实例的访问，从而允许你在组件内部进行编程式导航。

以下是如何在 <script setup> 中使用 useRouter 进行编程式导航的示例：

首先，确保你已经安装并正确配置了 Vue Router。

然后，在你的组件中，使用 <script setup> 语法和 useRouter 钩子：

<template>  
  <button @click="goToAbout">Go to About</button>  
</template>  
  
<script setup>  
import { useRouter } from 'vue-router';  
  
const router = useRouter();  
  
const goToAbout = () => {  
  router.push({ name: 'About' }); // 使用路由名称  
  // 或者  
  router.push('/about'); // 使用路径  
};  
</script>

在上面的示例中，我们首先从 vue-router 导入 useRouter 钩子。然后，在 <script setup> 中，我们调用 useRouter 来获取路由实例，并将其存储在 router 常量中。接着，我们定义了一个 goToAbout 方法，当按钮被点击时，该方法会被调用，并使用 router.push 方法进行编程式导航。

router.push 方法接受一个路由位置对象或字符串路径作为参数，这取决于你想要如何指定目标路由。你可以使用路由名称（如果已定义）或直接使用路径字符串。

如果你想替换当前路由而不是添加一个新的历史记录条目，你可以使用 router.replace 方法，其用法与 router.push 类似。

请注意，<script setup> 是 Vue 3 引入的一种更简洁的组件语法，它允许你在 <script> 标签内直接声明组件的响应式状态、计算属性、方法等，而无需显式导出它们。这种语法特别适用于与 Composition API 一起使用，使得组件逻辑更加集中和清晰。