Vue.js 是一个流行的前端框架，它提供了一种简单、灵活的方式来构建单页面应用程序（SPA）。Vue-Router 是 Vue.js 官方提供的路由管理器，它可以帮助我们在应用程序中实现页面之间的导航。在本文中，我们将介绍如何在 Vue.js SPA 应用程序中使用 Vue-Router。
安装和配置 Vue-Router
首先，我们需要安装 Vue-Router。在终端中运行以下命令：
npm install vue-router --save
安装完成后，在我们的应用程序中引入 Vue-Router：
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter);
接下来，我们需要创建一个路由实例，并将其与我们的 Vue.js 应用程序集成。在我们的应用程序的入口文件中，我们可以创建一个路由实例，并将其传递给我们的 Vue.js 实例：
-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------
------ --------- ---- -------------
-------------------
----- ------ - --- -----------
------- -
-- -------
-
---
--- -----
-------
------- - -- -------
------------------在路由实例中，我们需要定义我们的路由。路由可以是一个对象，也可以是一个数组。每个路由都应该包含路径（path）和组件（component），如下所示：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- -----------
---------- -------
-
-
---在这个例子中，我们定义了三个路由，分别是 /、/about 和 /contact。每个路由都有一个相应的组件，它们分别是 Home、About 和 Contact。
在模板中使用路由
一旦我们定义了路由，我们就可以在我们的模板中使用它们了。我们可以使用 <router-link> 组件来创建链接，它会自动渲染为一个 <a> 标签。例如，我们可以在我们的 App.vue 组件中添加以下代码：
-- -------------------- ---- -------
----------
-----
-----
------------ -------------------------
------------ -------------------------------
------------ -----------------------------------
------
---------------------------
------
-----------在这个例子中，我们使用 <router-link> 组件创建了三个链接，分别是 /、/about 和 /contact。当用户点击这些链接时，Vue-Router 会自动渲染相应的组件。
我们还使用了 <router-view> 组件来渲染路由。这个组件会根据当前路由的路径渲染相应的组件。
路由传参
有时候我们需要在路由之间传递参数。Vue-Router 提供了多种方式来实现这个目的。
动态路由
我们可以使用动态路由来传递参数。例如，我们可以定义一个动态路由，它的路径包含一个参数：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
});在这个例子中，我们定义了一个动态路由 /user/:id，其中 :id 是一个参数。当用户访问 /user/123 时，Vue-Router 会自动将参数 123 传递给我们的 User 组件。
在我们的 User 组件中，我们可以使用 $route.params 来访问这个参数：
export default {
name: 'User',
computed: {
userId() {
return this.$route.params.id;
}
}
}在这个例子中，我们定义了一个计算属性 userId，它返回当前路由的参数。
查询参数
我们还可以使用查询参数来传递参数。例如，我们可以定义一个路由，它包含一个查询参数：
const router = new VueRouter({
routes: [
{
path: '/search',
component: Search
}
]
});在我们的 Search 组件中，我们可以使用 $route.query 来访问查询参数：
export default {
name: 'Search',
computed: {
query() {
return this.$route.query.q;
}
}
}在这个例子中，我们定义了一个计算属性 query，它返回查询参数 q。
路由守卫
有时候我们需要在路由之间添加一些额外的逻辑。Vue-Router 提供了路由守卫来实现这个目的。路由守卫是一些回调函数，它们会在路由发生变化时自动调用。
全局守卫
我们可以使用全局守卫来拦截所有的路由。例如，我们可以在我们的路由实例中添加一个 beforeEach 守卫：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-- ---
-
---
---------------------- ----- ----- -- -
-- -------
-------
---在这个例子中，我们定义了一个 beforeEach 守卫。这个守卫会在每个路由发生变化之前被调用。我们可以在这个守卫中添加一些额外的逻辑，例如验证用户是否已经登录。
路由守卫
我们还可以使用路由守卫来拦截特定的路由。例如，我们可以在我们的路由定义中添加一个 beforeEnter 守卫：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ---------
---------- ------
------------ ---- ----- ----- -- -
-- -------
-------
-
-
-
---在这个例子中，我们定义了一个路由 /admin，并添加了一个 beforeEnter 守卫。这个守卫会在用户访问 /admin 路由时被调用。
总结
Vue-Router 是一个强大的路由管理器，它可以帮助我们在 Vue.js SPA 应用程序中实现页面之间的导航。在本文中，我们介绍了如何安装和配置 Vue-Router，如何在模板中使用路由，如何传递参数以及如何使用路由守卫。希望这篇文章可以帮助你更好地理解 Vue-Router，并在你的应用程序中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662bcc52d3423812e494fd89