Vue Router 路由简单案例介绍
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