随着前端技术的不断发展，单页应用（SPA）已经成为前端开发中的一种常见模式。在 SPA 中，页面只需加载一次，通过路由导航实现页面之间的切换。Vue-Router 是 Vue.js 官方提供的路由管理器，可以轻松地实现 SPA 中的路由导航。
安装 Vue-Router
在使用 Vue-Router 之前，需要先安装它。可以通过 npm 安装：
npm install vue-router
创建路由实例
在使用 Vue-Router 之前，需要先创建一个路由实例。在实例化 Vue-Router 时，需要提供一个路由配置数组，该数组中每个对象表示一个路由。路由对象包含以下属性：
- path：表示该路由的 URL 路径
- component：表示该路由对应的组件
例如，下面是一个简单的路由配置：
// javascriptcn.com 代码示例
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact },
];
const router = new VueRouter({
routes,
});在上面的代码中，我们先引入了 Vue 和 Vue-Router，然后使用 Vue.use(VueRouter) 注册 Vue-Router 插件。接着定义了一个路由配置数组，其中包含了三个路由对象，分别对应根路径、关于页面和联系页面。最后创建了一个 VueRouter 实例，将路由配置数组传入其中。
在组件中使用路由
在定义好路由实例后，可以在组件中使用路由。Vue-Router 提供了两种组件方式：路由视图和路由链接。
路由视图
路由视图是一个用于显示当前路由对应组件的组件。在 Vue 模板中使用 <router-view> 标签来引入路由视图，如下所示：
<template>
<div>
<router-view></router-view>
</div>
</template>在上面的代码中，我们使用 <router-view> 标签来引入路由视图。当路由发生变化时，该标签将显示当前路由对应的组件。
路由链接
路由链接用于在页面中创建一个链接，当用户点击该链接时，将导航到指定的路由。在 Vue 模板中使用 <router-link> 标签来创建路由链接，如下所示：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
</div>
</template>在上面的代码中，我们使用 <router-link> 标签创建了三个路由链接，分别对应根路径、关于页面和联系页面。
路由参数
在实际开发中，经常需要根据不同的路由参数来显示不同的内容。Vue-Router 提供了一种方便的方式来处理路由参数，使用路由参数可以轻松地实现动态路由。
路由参数可以通过在路由路径中使用冒号（:）来定义。例如，我们可以定义一个带有动态参数的路由如下所示：
const routes = [
{ path: '/user/:id', component: User },
];在上面的代码中，我们定义了一个带有动态参数 id 的路由。当用户访问 /user/123 时，将会渲染 User 组件，并将路由参数 id 设置为 123。
在组件中可以通过 $route.params 对象来访问路由参数。例如，我们可以在 User 组件中使用 $route.params.id 来获取 id 参数的值。
路由导航
在 SPA 中，路由导航是实现页面之间切换的关键。Vue-Router 提供了一种方便的方式来进行路由导航，使用路由导航可以轻松地实现页面之间的切换。
在 Vue 组件中，可以通过 this.$router 对象来进行路由导航。例如，我们可以在组件中使用 this.$router.push 方法来进行路由导航。该方法接受一个路由对象作为参数，表示要导航到的路由。例如，下面是一个简单的路由导航示例：
methods: {
goToAboutPage() {
this.$router.push({ path: '/about' });
},
},在上面的代码中，我们定义了一个 goToAboutPage 方法，该方法使用 this.$router.push 方法来进行路由导航。当用户点击按钮时，将会导航到关于页面。
总结
Vue-Router 是 Vue.js 官方提供的路由管理器，可以轻松地实现 SPA 中的路由导航。在本文中，我们介绍了如何安装和使用 Vue-Router，以及如何在组件中使用路由视图和路由链接。此外，我们还介绍了如何使用路由参数和路由导航。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506a7cd95b1f8cacd26707d