vue 路由跳转

在 Vue.js 中，路由跳转通常是通过 Vue Router 来管理的。Vue Router 是 Vue.js 的官方路由管理器，允许你在单页应用中轻松管理页面之间的导航。

1. 安装 Vue Router

首先，你需要安装 Vue Router（如果你还没有安装的话）：

npm install vue-router

2. 设置 Vue Router

在 src/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(process.env.BASE_URL),
  routes
});

export default router;

然后在 src/main.js 中引入并使用 Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

3. 路由跳转方法

一旦路由设置好，你可以通过以下几种方法进行路由跳转：

a. 使用 <router-link> 标签

这是 Vue Router 提供的一个组件，用于在模板中定义导航链接：

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

b. 使用 this.$router.push 或 this.$router.replace

在 JavaScript 中，你可以通过 this.$router.push() 或 this.$router.replace() 来进行程序化的跳转。

• this.$router.push() 会将目标页面添加到浏览历史栈中。
• this.$router.replace() 会替换当前历史记录。

// 示例：通过按钮点击跳转
<template>
  <div>
    <button @click="goHome">Go to Home</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    }
  }
};
</script>

c. 动态路由跳转

你还可以通过动态传递参数来进行路由跳转：

// 假设我们有一个 `User` 页面，接受 `id` 作为参数
<router-link :to="'/user/' + user.id">Go to User</router-link>

// 或者在代码中进行跳转
this.$router.push({ name: 'User', params: { id: user.id } });

4. 路由传参

如果你需要传递参数（如 ID 或其他数据），可以使用 params 或 query。

• 使用 params：
  配置路由时，可以通过 :id 等动态路径参数来获取参数。

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
];

跳转时使用 params：

this.$router.push({ name: 'User', params: { id: 123 } });

在 User 组件中，可以通过 this.$route.params.id 来访问传递的 id。

• 使用 query：

this.$router.push({ path: '/user', query: { id: 123 } });

在目标组件中，可以通过 this.$route.query.id 来获取 id。

总结

• 使用 <router-link> 标签来创建页面链接。
• 使用 this.$router.push() 或 this.$router.replace() 来进行编程式跳转。
• 可以通过 params 或 query 来传递参数。

这些方法使得 Vue 应用中的路由跳转变得非常简单灵活！