Vue-Router 跳转页面的方法
Vue-Router 是 Vue.js 官方提供的路由管理器，可以帮助我们构建单页面应用（SPA）和多页面应用。在 Vue.js 中，使用 Vue-Router 实现页面之间的跳转非常简单。
基本概念
在开始讲解具体的跳转方法前，先来了解一下 Vue-Router 的基本概念：
- 路由：指的是 URL 和对应组件之间的映射关系。
- 路由器：Vue-Router 提供的一个实例，用于管理路由。
- 路由组件：与路由相对应的组件。
通过 router-link 进行跳转
在 Vue.js 应用中，可以使用 router-link 标签来实现页面之间的跳转。该标签会被渲染成一个 <a> 标签，点击后会触发路由的跳转。
------------ -------------------------------
其中，to 属性指定要跳转的路径。如果要传递参数，则可以在路径中使用动态片段，如：
------------ ------------- - --------------------------
通过编程式导航进行跳转
除了使用 router-link 标签进行跳转外，还可以通过编程式导航来实现跳转。Vue-Router 提供了以下两种方式：
router.push
router.push 方法用于向历史记录中添加一条新记录，然后根据指定的路径跳转到对应的页面。例如：
-- ----- ------------------- ----- -------- - ------ -- -- ------- ------------------- ----- ---------- ------ - ------- ---
router.replace
与 router.push 不同的是，router.replace 方法不会向历史记录中添加新记录，而是直接替换当前的记录。例如：
-- ------ ------------------------------
路由传参
在实际开发中，经常需要在路由之间传递参数。Vue-Router 支持三种方式传递参数：
动态片段
在定义路由时，可以使用动态片段来匹配包含特定信息的 URL，如：
----- ------ - --- ----------- ------- - - ----- ---------------- ----- ------- ---------- ---- - - --上述代码中，路径为
/user/:userId中的:userId表示一个动态片段，可以匹配任意字符。在组件中，可以通过$route.params.userId来获取该动态片段的值。查询参数
查询参数可以在路径之后以
?开始，并以&分隔多个参数：-------------------------------------
在组件中，可以通过
$route.query.keyword和$route.query.category来获取查询参数的值。属性传递
除了通过 URL 传递参数外，还可以通过组件属性传递参数。例如：
------------ ------ ----- ------- ------- - ------- --- ---- ---- --------------
在上述代码中，使用
name属性指定要跳转到的路由名，并使用params属性传递参数。在组件中，可以通过$route.params.userId来获取该参数的值。
总结
本文介绍了 Vue-Router 的基本概念和常用跳转方式，并详细讲解了如何传递参数。掌握这些知识后，我们就能够方便地实现页面之间的跳转了。
参
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/2174