实例讲解Vue.js中router传参
更新时间：2018年04月22日 14:08:38 投稿：laozhang
本篇文章通过实例给大家分析了Vue.js中router传参的相关知识点，对此有兴趣的朋友参考学习下。
Vue-router参数传递
为什么要在router中传递参数
设想一个场景，当前在主页中，你需要点击某一项查看该项的详细信息。那么此时就需要在主页传递该项的id到详情页，详情页通过id获取到详细信息。
vue-router 参数传递的方式
Parma传参
贴代码：
/router/index.vue
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
}
]
})
组件Works传递一个work的id到组件Work
/components/Home/Comtent/Works.vue
// 触发它传递一个对象到组件Work
getIt (id) {
this.$router.push({
path: '/work',
name: 'Work',
params: {
id: id
}
})
}
/components/Work/Index.vue
<template>
<div class="work">
work: {{id}}
</div>
</template>
<script>
export default {
name: 'Work',
data () {
return {
id: this.$route.params.id //拿到id
}
}
}
</script>
运行截图:
query传参
将上面的parmas改为query即可，即：
// 传入
this.$router.push({
path: '/work',
name: 'Work',
query: {
id: id
}
})
... ...
this.$route.query.id // 获取
parmas与query的区别
query是通过url传递参数，始终显示在url中
parmas传参，刷新页面过后就没有数据了，无法将获取到的参数进行保存
总结： 这两种参数的传递方式，各有各的用途，具体的还要自己亲手试一试才知道，前端这个领域，还是要多多亲自动手实践。
相关文章
这篇文章主要为大家详细介绍了使用Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
docxtemplater 是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtemplater导出word吧2025-04-04
这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章讲给大家详细介绍一下Vue如何实现登录后添加动态路由并跳转，文章通过代码示例介绍的非常详细，对我们的学习或工作有一定的的帮助,需要的朋友可以参考下2023-07-07
vxe-table 使用 vxe-upload 在表格中实现非常强大的粘贴上传图片和附件功能
本文通过实例代码介绍了vxe-table渲染器的强大功能,配合 vxe-upload 上传,比如复制或者截图一张图片,通过粘贴方式快速粘贴到单元格中,能支持单张、多张、查看、预览功能,感兴趣的朋友跟随小编一起看看吧2024-12-12
Vue.js通常运行在浏览器环境,而浏览器不允许直接与MySQL数据库进行连接,本文主要介绍了vue实现直连mysql的方法步骤,感兴趣的可以了解一下2024-11-11
element中el-cascader级联选择器只有最后一级可以多选
本文主要介绍了element中el-cascader级联选择器只有最后一级可以多选，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-01-01
详解Vue、element-ui、axios实现省市区三级联动
这篇文章主要介绍了Vue、element-ui、axios实现省市区三级联动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue如何进行数据代理,通过本文学习我们了解如何代理的及验证两条线的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要给大家介绍了关于vue如何动态实时的显示时间，以及vue时间戳 获取本地时间实时更新的相关资料，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
最新评论