Vue.js 是一款流行的前端框架，可用于开发高性能、易于维护且易于扩展的 Web 应用程序。其中的 vue-router 是 Vue.js 中的一个重要组件，它提供了基本的路由功能和嵌套路由、路由守卫等特性，用于构建复杂的单页应用程序 （SPA）。本文将介绍 Vue.js 中如何使用 vue-router 实现路由显示，并提供一个简单的示例。
安装 vue-router
首先我们需要安装 vue-router。在 Vue.js 应用中使用 vue-router 时，我们需要先安装它。
通过 npm 安装，打开你的终端并键入：
--- ------- ------ ----------
创建路由
创建一个名为 router.js 文件，我们可以在其中定义一个新的 vue-router。
------ --- ---- -----
------ ------ ---- ------------
----------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- -- -- --------------------------
--
-
----- ---------
----- --------
---------- -- -- ---------------------------
-
-
--- 首先我们导入 Vue 和 vue-router。
- 然后使用
Vue.use(Router)安装 router 插件。 - 在 router 实例中，我们定义了两个路由对象。
- 每个对象都会有两个关键属性：
path和component。path：路由路径component：路由匹配到的组件
在组件中使用路由
在 App.vue 组件中使用 vue-router，我们可以使用 router-view 来动态加载需要渲染的组件，router-link 用于导航到定义的路由。
----------
---- ---------
-----
------------ -------------------------
------------ -------------------------------
------
---------------------------
------
-----------
--------
------ ------- -
----- ------
----------- -
----
------
-
-
---------router-view会根据路径匹配到的组件来动态渲染内容。router-link用于在应用中导航到定义的路由，通过 to 属性确定路由路径。
生成 HTML 链接
router-link 生成 HTML 链接 （h5 中的 a 标签），通过 v-bind 命令和一个对象参数，我们可以轻松添加一个 class 属性。
-----
------------
------
--------------- ------- ----------- --- --- --
-------------------
------------
-----------
--------------- ------- ----------- --- -------- --
--------------------
------v-bind:class绑定一个对象，这个对象中的键表示 class 名称，值表示是否添加 class。$route.path保存当前路由的路径，这个值会在路由变化时更新。
路由参数
有时我们需要在路由中传递参数，我们可以使用动态路由参数。在路由路径中添加:标记，表示这段路径是动态的。
------ ------- --- --------
------- -
-
----- ------------
----- -------
---------- -- -- --------------------------
-
-
--在 User.vue 组件中，我们可以使用 $route.params.id 来获取参数。
----------
-----
-------- -- ---------------- -------
------
-----------总结
到这里为止，我们已经了解了在 Vue.js 应用程序中使用 vue-router 实现路由显示的基础知识。我们介绍了如何安装 vue-router，如何创建路由，并在组件中使用路由。我们还介绍了如何动态设置 class 和传递路由参数。希望这篇文章对你有所帮助。
示例代码
你可以在下面的链接中下载本文中使用的示例代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e89b84f6b2d6eab3425303