如何在 Vue.js 中通过路由器发送到另一个页面 - JavaScript

在 Vue.js 中，我们可以使用路由器（Router）来管理页面间的导航。通过路由器，我们可以实现页面之间的跳转和传递数据。

安装和配置路由器

首先，我们需要安装 vue-router 包，然后在 Vue.js 应用程序中配置路由器。可以通过 npm 或者 yarn 来安装 vue-router：

npm install vue-router

或者

yarn add vue-router

在 Vue.js 应用程序的主文件中（通常是 main.js 或 app.js），我们需要导入和使用路由器。以下是一个基本的路由器配置示例：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./components/Home.vue'),
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('./components/About.vue'),
    },
  ],
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在上面的示例中，我们首先导入 Vue 和 VueRouter，然后使用 Vue.use(VueRouter) 来注册路由器。接下来，我们创建一个新的路由器实例，并传入一个 routes 数组，其中包含我们的页面配置。

在 routes 数组中，我们可以定义多个路由对象。每个路由对象包含一个 path 属性来定义路由的相对路径，一个 name 属性来指定路由的名称，以及一个 component 属性来指定将在路由被访问时显示的组件。

在模板中使用路由链接

现在我们已经配置了路由器，我们可以在 Vue.js 模板中使用 <router-link> 来创建用于导航的链接。以下是一个示例：

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

在上面的示例中，我们使用 <router-link> 创建了两个导航链接，一个指向根路径 /，另一个指向 /about。点击这些链接时，路由器会导航到相应的页面。

在组件中接收路由参数

有时，我们需要在跳转到另一个页面时传递参数。在 Vue.js 中，我们可以通过在路由链接中使用路由参数来实现。以下是一个示例：

<template>
  <div>
    <router-link :to="{ path: '/user', query: { id: user.id }}">View User</router-link>
  </div>
</template>

在上面的示例中，我们使用 :to 绑定一个动态的路由对象，其中包含一个 path 属性和一个 query 对象。在 query 对象中，我们可以定义需要传递给目标页面的参数。

在接收参数的目标页面中，我们可以使用 $route.query 来访问传递过来的参数。以下是一个示例：

export default {
  mounted() {
    console.log(this.$route.query.id); // 输出传递过来的用户ID
  },
};

在脚本中编程式导航

除了在模板中使用路由链接，我们还可以通过在脚本中编程式导航来实现页面跳转。在 Vue.js 中，我们可以使用 $router.push() 方法来进行编程式导航。以下是一个示例：

methods: {
  goToAboutPage() {
    this.$router.push('/about');
  },
},

在上面的示例中，我们在组件的方法中使用 $router.push() 方法来导航到 /about 页面。

总结

通过在 Vue.js 中使用路由器，我们可以实现页面之间的导航和传递参数。在模板中使用 <router-link> 来创建导航链接，并在组件中使用 $route.query 来接收传递的参数。在脚本中，我们可以使用 $router.push() 来进行编程式导航。以上是在 Vue.js 中通过路由器发送到另一个页面的基本示例。

请注意，以上示例仅为演示目的，并未包含完整的 Vue.js 应用程序的架构和组织。实际项目中，可以根据需要进行代码结构的设计和组织。