vue 实现在函数中触发路由跳转的示例

当我们在使用 Vue.js 开发 SPA（单页应用）时，使用路由跳转是必不可少的功能。在函数中触发路由跳转，可以让我们更加灵活地控制页面跳转，满足我们的设计需求。下面是实现这一功能的完整攻略：

1. 创建 Vue 项目并安装所需依赖

我们首先需要创建一个 Vue 项目并在其中安装所需的依赖。可以使用 Vue CLI 快速创建一个项目，然后在项目根目录下运行以下命令安装 vue-router：

npm install vue-router --save

1. 配置路由

我们需要在项目中创建一个路由配置文件，来定义我们的路由。在该配置文件中，需要先引入 Vue 和 vue-router，然后使用 Vue.use() 方法来设置路由。

示例如下：

import Vue from 'vue';
import VueRouter from "vue-router";
Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在上面的示例中，我们创建了两个路由，一个是 Home 页面，另一个是 About 页面，当访问对应路径时，会渲染相应的组件。

1. 在函数中触发路由跳转

当我们需要在函数中触发路由跳转时，需要使用 Vue Router 提供的编程式导航功能。我们可以通过调用 $router.push() 方法来实现跳转，该方法接受一个包含目标路由信息的对象。示例如下：

methods: {
  goToHome() {
    this.$router.push({ name: 'home' });
  },
  goToAbout() {
    this.$router.push({ name: 'about' });
  }
}

在上面的示例中，我们定义了两个函数 goToHome() 和 goToAbout()，分别对应跳转到 Home 页面和 About 页面。调用 $router.push() 方法时，我们传入了一个包含目标路由名称的对象，这样就可以实现在函数中触发路由跳转了。

1. 简单示例

下面是一个简单的示例，演示了如何在函数中触发路由跳转。在该示例中，我们创建了两个按钮，一个用于跳转到 Home 页面，另一个用于跳转到 About 页面。

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

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push({ name: 'home' });
    },
    goToAbout() {
      this.$router.push({ name: 'about' });
    }
  }
};
</script>

1. 带有参数的示例

除了简单的路由跳转外，我们还可以在函数中触发带有参数的路由跳转。示例如下：

methods: {
  goToUser(userId) {
    this.$router.push({ name: 'user', params: { id: userId } });
  }
}

在上面的示例中，我们定义了一个 goToUser() 函数，用于跳转到某个用户的页面。通过传入 userId 参数并调用 $router.push() 方法，就可以实现带有参数的路由跳转了。

附：完整的路由配置如下：

import Vue from 'vue';
import VueRouter from "vue-router";
Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在上面的路由配置中，我们添加了一个带有参数的路由，用于渲染某个用户的页面。