vue3 路由传参,vue-router路由传参,vue路由传参的基本实现方式小结【三种方式】

vue3 路由传参,vue-router路由传参,vue路由传参的基本实现方式小结【三种方式】

摘要:本文主要介绍了vue路由参数传递的基本实现方法,并结合实例总结分析了vue.js路由参数传递的三种实现方法,包括参数显示参数传递、非显示参数传递和查询显示参数传递。有需要的可以参考一下。

本文结合实例描述了vue路由参数的基本实现。分享给你,供你参考,如下:

前言

通常,当父路由跳转到子路由时,应用VU路由传输参数的使用场景,携带参数跳转。传递参数可以分为params传递参数和查询传递参数,params传递参数又可以分为在url中显示参数和不显示参数两种方式,这是vue路由传递参数的三种方式。

方式一:params 传参(显示参数)

Params参数(显示参数)可以分为声明式和编程式两种方式。

1.声明性路由器链接

此方法由路由器链接组件的to属性实现。此方法的参数可以是字符串路径或描述地址的对象。当使用这种方法传递值时,需要预先配置子路由的参数,例如:

//子路由配置

{

路径:“/child/:id”,

组件:子组件

}

//父路由组件

路由器链接:to='/Child/123 '输入子路由/路由器链接。

2.可编程的。$router.push

当使用这种方法传递值时,还需要预先配置子路由的参数,例如:

//子路由配置

{

路径:“/child/:id”,

组件:子组件

}

//父路由的编程参数(通常由事件触发)

这个。$router.push({

路径:“/child/${id}”,

})

在子路径中,传递的参数值可以通过下面的代码获得

这个。$route.params.id

方式二:params 传参(不显示参数)

Params参数传递(不显示参数)也可以分为两种方式:声明式和编程式。与第一种方式不同,该值通过路由的别名来传递。

1.声明性路由器链接

这个方法也是通过路由器链接组件的to属性实现的,例如:

Router-link: to=' {name:' Child ',params: {id: 123}} '输入子路由/路由器链接。

2.可编程的。$router.push

当使用此方法传输值时,子路由也需要预先配置参数,但是:/id不能再用于传输参数,因为params已经用于在父路由中携带参数,例如:

//子路由配置

{

路径:'/child,

姓名:'孩子',

组件:子组件

}

//父路由的编程参数(通常由事件触发)

这个。$router.push({

姓名:'孩子',

参数:{

编号:123

}

})

在子路径中,传递的参数值可以通过下面的代码获得

这个。$route.params.id

注意:上面提到的使用params传递参数而不显示url的方法会导致页面刷新时传递的值丢失。

方法3:查询传递参数(显示参数)

查询参数(显示参数)也可以分为声明式和编程式两种方式。

1.声明性路由器链接

这种方法也是通过router-link组件的to属性实现的,但是使用这种方法传递值时,需要子路由提前配置路由别名(name属性),例如:

//子路由配置

{

路径:'/child,

姓名:'孩子',

组件:子组件

}

//父路由组件

Router-link: to=' {name:' Child ',query: {id: 123}} '输入子路由/路由器链接。

2.可编程的。$router.push

使用此方法传递值时,还需要预先配置子路由的路由别名(名称属性),例如:

//子路由配置

{

路径:'/child,

姓名:'孩子',

组件:子组件

}

//父路由的编程参数(通常由事件触发)

这个。$router.push({

姓名:'孩子',

参数:{

编号:123

}

})

在子路径中,传递的参数值可以通过下面的代码获得

这个。$route.query.id

希望本文对vue.js的编程有所帮助

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: