vue-router路由简单案例介绍

阅读时长 3 分钟读完

Vue Router 是 Vue.js 官方提供的路由管理器,用于构建单页应用程序 (SPA)。在本文中,我们将介绍如何使用 Vue Router 实现简单的路由功能,并给出示例代码。

安装

要安装 Vue Router,可以使用 npm 或 yarn:

或者

使用

在 main.js 中引入 Vue Router 并注册路由:

-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------

------------------

----- ------ - -
  -
    ----- ----
    ----- -------
    ---------- -- -- --------------------------
  --
  -
    ----- ---------
    ----- --------
    ---------- -- -- ---------------------------
  -
-

----- ------ - --- -----------
  ----- ---------- -- -- --- -- -
  ----- ---------------------
  ------
--

--- -----
  -------
  ------- - -- ------
-----------------

上述代码中,我们定义了两个路由://about。每个路由都有一个名称和对应的组件,在访问相应路由时会渲染相应的组件。

在 Vue 组件中,我们可以通过 <router-link> 组件实现路由导航:

此外,我们还可以通过编程式导航实现路由跳转:

总结

在本文中,我们介绍了 Vue Router 的基本用法,包括如何安装、注册和使用。通过示例代码的演示,你应该已经掌握了如何创建简单的路由功能。在实际开发中,Vue Router 可以帮助我们快速构建 SPA 应用程序,并提供了许多高级功能,例如路由参数、嵌套路由等。如果您想深入了解 Vue Router,请查看官方文档。

示例代码

完整的示例代码可在 GitHub 上获取。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/1886

纠错
反馈