Vue.js 是一款流行的前端框架，其官方提供的路由库 vue-router 可以方便地实现前端路由功能。在本文中，我们将探讨如何使用 vue-router 实现页面跳转。
什么是 vue-router
vue-router 是 Vue.js 官方提供的路由库，它可以帮助我们实现前端路由功能。Vue.js 本身提供了组件化的方式来组织页面，而 vue-router 则可以让我们在不刷新整个页面的情况下，动态地切换组件内容。
安装和配置 vue-router
安装 vue-router 非常简单，只需要使用 npm 命令即可：
npm install vue-router
安装完成后，我们需要在 Vue.js 应用程序中配置 vue-router。在 main.js 文件中添加以下代码：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------
------------------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
-
-
----- ------ - --- -----------
------
--
--- -----
--- -------
-------
------- - -- ------
--在以上示例中，我们首先使用 import 语句引入 VueRouter 库，然后在 Vue 实例中使用 Vue.use(VueRouter) 启用路由功能。我们之后定义了两个页面路由：根路由 / 和关于页 /about。定义完成后，我们可以使用 VueRouter 类创建一个路由管理器实例 router，并将其传递给 Vue 实例的 router 选项。这样就完成了路由初始化的工作。
在 Vue 组件中使用 vue-router
通过以上配置，我们已经可以切换不同页面路由了，但是如何在 Vue 组件中实现跳转呢？实际上，我们只需要在组件模板中使用 <router-link> 标签来指定跳转的目标路由，就可以实现页面跳转了。以下是一个示例：
<template>
<div>
<h1>首页</h1>
<router-link to="/about">关于我们</router-link>
</div>
</template>在以上示例中，我们通过 <router-link> 标签将点击事件绑定到 /about 路由，用户点击标签时即可自动切换到指定页面。
嵌套路由实现页面组合
除了在组件内部使用 <router-link> 跳转到其他页面外，我们还可以通过嵌套路由来实现页面组合。嵌套路由是指在一个页面内部再包含其他页面路由的方式。以下是一个示例：
-- -------------------- ---- -------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- ------
--------- -
-
----- ---
---------- ---------
--
-
----- ----------
---------- ------------
--
-
----- ----------
---------- ------------
-
-
-
-在以上示例中，我们首先定义了一个 /about 路由，在该路由内部又定义了三个子路由：/about、/about/history 和 /about/culture。这样，我们就可以在网站的关于页面中，包含多个不同的子页面。
在组件模板内部，我们可以通过 <router-view> 标签来插入路由中定义的子页面组件。以下是一个示例：
-- -------------------- ---- -------
----------
-----
-------------
------------ ------------------------------
------------ --------------------------------------
------------ --------------------------------------
---------------------------
------
-----------在以上示例中，我们通过 <router-link> 标签来绑定跳转事件，并使用 <router-view> 标签来插入子页面组件。注意，我们在路由定义中，将每个子路由所对应的组件都定义了一个唯一的 path 属性，这样 vue-router 才能正确地将内部路由映射到指定的组件中。
总结
vue-router 是 Vue.js 官方提供的路由库，它可以帮助我们实现前端路由功能。在本文中，我们介绍了如何安装和配置 vue-router，以及如何在 Vue 组件中实现页面跳转。同时，我们探讨了使用嵌套路由实现页面组合的方法。希望本文能够帮助你更加深入地理解 Vue.js 和 vue-router，从而优化你的前端开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c640d010032fedd38c18f5