3种vue路由传参的基本模式
更新时间：2018年02月22日 10:01:18 作者：ESnail
这篇文章主要为大家详细介绍了vue路由传参的3种基本模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
路由是连接各个页面的桥梁，而参数在其中扮演者异常重要的角色，在一定意义上，决定着两座桥梁是否能够连接成功。
在vue路由中，支持3中传参方式。
场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取对应li的数据，显示相应的正确的内容。
父组件中：
<li v-for="article in articles" @click="getDescribe(article.id)">
方案一：
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
// 方案一，需要对应路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。
// 在子组件中可以使用来获取传递的参数值。
$route.params.id
方案二：
// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
//子组件中: 这样来获取参数
$route.params.id
方案三：
// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
// 对应路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
// 对应子组件: 这样来获取参数
$route.query.id
// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vxe-table是一个全功能的Vue表格,满足绝大部分对Table的一切需求,与任意组件库完美兼容,下面这篇文章主要给大家介绍了关于Vxe-Table开发中各种坑以及避坑的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue多次打包后出现浏览器缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
BEM是一种前端命名方法论,主要是针对CSS,意思是块（Block）、元素（Element）、修饰符（Modifier）的简写,这种命名方法让CSS便于统一团队开发规范和方便维护,本文给大家介绍了Vue3配置bem样式架构,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue3.0响应式函数原理，Vue3的响应式系统可以监听动态添加的属性还可以监听属性的删除操作，以及数组的索引以及length属性的修改操作。另外Vue3的响应式系统还可以作为模块单独使用。下面更多介绍，需要的小伙伴可以才可以参考一下2022-02-02
这篇文章主要介绍了vue路由跳转了但界面不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构，将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易2023-03-03
Vue的插值表达式是一种特殊的语法,用于在模板中动态地将数据绑定到视图中,一般使用双大括号 ("{{ }}")将表达式包裹起来,下面我们就来根据三个案例来深入了解下插值表达式的使用吧2023-11-11
路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源,下面这篇文章主要给大家介绍了关于Vue路由传递参数与重定向的使用方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue3.0 CLI - 3.2 - 路由的初级使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
vue3.0 vue-router4.0打包后页面空白的解决方法
本文主要介绍了vue3.0 vue-router4.0打包后页面空白的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论