Vue.js 是一款流行的 JavaScript 框架，用于构建单页面应用程序（SPA）。Vue Router 是 Vue.js 的一个插件，用于实现前端路由。Vue Router 可以帮助开发者构建更加强大的单页面应用程序，同时也可以提高应用程序的性能。
本文将介绍 Vue Router 在 Vue.js 中的基本使用教程，包括如何安装和配置 Vue Router，如何定义路由和路由组件，如何实现路由跳转和传递参数，以及如何使用路由守卫实现页面权限控制等。
安装和配置 Vue Router
要使用 Vue Router，首先需要安装它。可以使用 npm 或者 yarn 安装 Vue Router：
npm install vue-router # 或者 yarn add vue-router
安装完成后，在 Vue.js 应用程序中引入 Vue Router：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
Vue.use() 方法会安装 Vue Router，并将其注册为 Vue.js 的插件。
定义路由和路由组件
在 Vue Router 中，路由是指 URL 和组件之间的映射关系。当用户访问某个 URL 时，Vue Router 会根据 URL 找到对应的组件，并将其渲染到页面中。
要定义路由，需要创建一个 VueRouter 实例，并传入一个 routes 配置项。routes 配置项是一个数组，每个元素都是一个路由对象，包含了 path 和 component 属性。path 属性是 URL 的路径，component 属性是对应的组件。
下面是一个简单的路由配置示例：
-- -------------------- ---- ------- ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- -- - ----- ----------- ---------- ------- - - ----- ------ - --- ----------- ------ --
在上面的示例中，我们定义了三个路由：'/'、'/about' 和 '/contact'。这三个路由分别对应三个组件：Home、About 和 Contact。
定义路由组件非常简单。可以使用 Vue.js 提供的单文件组件（.vue 文件），也可以使用普通的 JavaScript 对象。
下面是一个简单的路由组件示例：
-- -------------------- ---- -------
-- --------
----------
-----
-------------
---------- -- -- ------------
------
-----------
--------
------ ------- -
----- ------
-
---------实现路由跳转和传递参数
在 Vue.js 中，可以使用 router-link 组件实现路由跳转。router-link 组件是 Vue Router 提供的一个内置组件，用于生成带有正确的 href 属性的 标签，从而实现路由跳转。
下面是一个简单的 router-link 示例：
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link>
在上面的示例中，我们使用了三个 router-link 组件，分别对应三个路由：'/'、'/about' 和 '/contact'。
要传递参数，可以在路由路径中使用动态片段。动态片段使用冒号（:）开头，然后是参数名。在组件中，可以通过 $route.params 对象访问参数。
下面是一个动态路由示例：
-- -------------------- ---- -------
----- ------ - -
- ----- ------------ ---------- ---- -
-
----- ------ - --- -----------
------
--
-- --------
----------
-----
-------- -- ---------------- -------
------
-----------
--------
------ ------- -
----- ------
-
---------在上面的示例中，我们定义了一个动态路由 '/user/:id'，其中 :id 是动态片段。当用户访问 '/user/123' 时，Vue Router 会将路由参数 id 设置为 123，并渲染 User 组件。
使用路由守卫实现页面权限控制
在 Vue Router 中，可以使用路由守卫实现页面权限控制。路由守卫是一系列的回调函数，用于在路由切换前后执行一些操作。
在 Vue Router 中，有三种路由守卫：
- 全局前置守卫（beforeEach）：在每个路由切换前执行，可以用于实现登录验证等操作。
- 路由独享守卫（beforeEnter）：在某个路由切换前执行，只对该路由有效。
- 组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：在组件内部执行，可以用于实现页面跳转动画等操作。
下面是一个全局前置守卫示例：
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- --------
-- -------------------- -- ------------------- -
-- ----------------
--------------
- ---- -
-- ---------------
------
-
--在上面的示例中，我们定义了一个全局前置守卫。它会在每个路由切换前执行。如果用户未登录且目标路由需要登录验证，则会跳转到登录页面。否则，会继续路由切换。
总结
Vue Router 是 Vue.js 的一个插件，用于实现前端路由。本文介绍了 Vue Router 在 Vue.js 中的基本使用教程，包括如何安装和配置 Vue Router，如何定义路由和路由组件，如何实现路由跳转和传递参数，以及如何使用路由守卫实现页面权限控制等。
Vue Router 是一个非常强大的工具，可以帮助开发者构建更加强大的单页面应用程序。希望本文对你有所帮助，欢迎留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66056435d10417a22232d4ef