vue中页面(路由)跳转及传值的几种方式 router-link + query + params

最新推荐文章于 2024-08-25 22:59:34 发布

原创

最新推荐文章于 2024-08-25 22:59:34 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了在Vue.js应用中使用`router-link`和`this.$router.push()`进行页面跳转以及参数传递的方法。包括使用query和params的区别，以及何时选择query或params。当使用params时，必须通过name指定页面，而query参数会显示在URL上并能在刷新后保留。此外，还提到了通过LocalStorage、SessionStorage和vux等其他方式传递数据。

vue中页面(路由)跳转及传值的几种方式

知道query 和 params 是什么

参考文案：https://www.php.cn/js-tutorial-382859.html

跳转的几种方式与传值

1、router-link

1.1 根据路由路径（无参数与有参数）

<router-link to = "/page">跳转到page页面</router-link>
<router-link :to = "{ path: '/page', query: { id: '001' } }">跳转到page页面</router-link>

1.2 根据路由名称（无参数和有参数的区别）

<router-link ：to = "{ name: 'page', query: { id: '110' } }">跳转到page页面</router-link>
<router-link :to = "{ name: 'page', params: { id: '110' } }">跳转到page页面</router-link>

使用路由与路径·的注意事项：

：to=“” 可以实现绑定动态的路由和参数
注意：router-link中链接如果是‘/‘开始就是从根路由开始，如果开始不带‘/’，则从当前路由开始。
使用params时是不能通过path跳转的
由于动态路由也是传递params的（/page/123?id=123），所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。
所以，使用params的时候，只能用name来指定页面。
router-link 的使用/功能

实现路由切换，就是小模块的路由切换，这个时候的router就相当于a标签

参