单页应用程序（SPA）经常使用动态路由。这使得用户能够访问应用程序中的不同组件和页面，而无需导航到每个页面的独立 URL。React.js 和 Vue.js 是当前最流行的前端框架，它们都支持动态路由。但是，它们的路由设置略有不同。
React.js
在 React.js 中，您需要使用 React Router 库。该库通过<route>组件将路由与组件绑定。在创建动态路由时，可以指定参数名称和正则表达式模式。下面是一个简单的 React 动态路由示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
----- ---- - -- ----- -- -- -
-----
--------- ----------------------------
------
--
----- --- - -- -- -
--------
-----
--------
------ ----- -------- ---------------- --
------ ----------------------- ---------------- --
------ ------------------- --
---------
------
---------
--
------ ------- ----在上面的代码中，我们定义了一个名为“User”的组件，并将其与 URL 参数绑定。 当用户访问 /users/username 时，React 将呈现 User 组件并将传递 username 参数。您可以通过使用 match.params 对象来访问参数。
Vue.js
在 Vue.js 中，你需要使用 Vue Router 库。这个库与 React Router 几乎相同，只是格式略有不同。在创建动态路由时，您可以使用“ /: 参数”语法，如下所示：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- -------------
---------- -----
------ ----
-
-
---在上面的代码中，我们定义了一个名为“User”的组件，并将其与 URL 参数绑定。 和 React 一样，当用户访问 /users/id 时，Vue 将呈现 User 组件并将传递 id 参数。您可以通过“this.$route.params.id”访问参数。
总结
React 和 Vue 都支持动态路由设置。无论您使用哪个框架，使用路由库都可以确保用户可以访问应用程序的不同组件和页面。 React Router 和 Vue Router 在实现上略有不同，但它们都执行相同的任务。 在使用这些库时，请记住在创建动态路由时遵循其格式。
继续深入了解 React Router 和 Vue Router，它们都有更高级的特性和选项，可以帮助您更好地控制应用程序的路由。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649562d348841e98942951fb