[教程]揭秘Vue Router：轻松实现页面跳转与数据同步

Vue Router 是 Vue.js 的官方路由管理器，它是构建单页面应用（SPA）的核心库之一。通过 Vue Router，我们可以实现页面之间的跳转，并同步传递数据。本文将详细介绍 Vue Ro...

Vue Router 是 Vue.js 的官方路由管理器，它是构建单页面应用（SPA）的核心库之一。通过 Vue Router，我们可以实现页面之间的跳转，并同步传递数据。本文将详细介绍 Vue Router 的基本使用方法，包括页面跳转、路由配置、参数传递等，帮助开发者轻松实现页面跳转与数据同步。

一、准备工作

在开始使用 Vue Router 之前，我们需要做一些准备工作：

1. 创建 Vue 项目：你可以使用 Vue CLI 创建一个全新的 Vue 项目，或者将 Vue Router 引入到一个现有的 Vue 项目中。

2. 安装 Vue Router：在项目根目录下，执行以下命令安装 Vue Router：

npm install vue-router --save

二、创建路由实例

在 Vue 应用中，首先需要创建一个路由实例。这个实例会负责管理和配置路由。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({ routes: [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ './views/Home.vue') }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ]
});
export default router;

在上述代码中，我们定义了两个路由：/ 和 /about。每个路由都有 path、name 和 component 属性。

三、配置 Vue 主实例

在创建 Vue 实例时，需要将路由实例传递给 Vue 实例。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({ el: '#app', router, components: { App }, template: '<App/>'
});

四、页面跳转

在 Vue 组件中，我们可以使用两种方式实现页面跳转：

1. 使用 <router-link> 标签

<router-link> 标签是一个组件，可以创建一个导航链接。通过使用 to 属性，我们可以指定目标路由。

<router-link to="/about">About</router-link>

当用户点击这个链接时，会跳转到 /about 路径。

2. 使用 this.$router.push() 方法

如果你需要在 JavaScript 中进行路由跳转，可以使用 this.$router.push() 方法。

this.$router.push('/about');

五、传递参数

在页面跳转时，我们有时需要传递参数。Vue Router 支持两种参数传递方式：query 和 params。

1. 使用 query

query 参数通过 URL 查询字符串传递。

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

在目标路由组件中，可以使用 $route.query 访问查询参数。

2. 使用 params

params 参数通过路由路径传递。

const router = new Router({ routes: [ { path: '/user/:userId', name: 'user', component: () => import('./views/User.vue') } ]
});

在目标路由组件中，可以使用 $route.params.userId 访问参数。

六、总结

Vue Router 是一个功能强大的路由库，它可以帮助开发者轻松实现页面跳转与数据同步。通过本文的介绍，相信你已经掌握了 Vue Router 的基本使用方法。在实际项目中，你可以根据需求进一步探索 Vue Router 的高级功能。