(原创)vue传参之通过Vue属性$route的params传参

30e8336b8229 发布于2019-08-22 18:21 / 2760人阅读

摘要：传值与传参是两块东西概念图原理传参的原理主要在于也有是的属性是的属性用来储存数据的键值对对象形式储存很多属性键值对属性属性值在里面清单通过浏览器插件开发者工具插件可以看的到属性内部的具体数据可以说于是一个中间容器用来容纳参数是键值对的方式这

vue传值与 vue传参是两块东西

概念图

原理

vue传参的原理主要在于 Vue.$route.params (也有 $route.query)

$route是Vue的属性,params是$route的属性,用来储存数据的键值对(对象形式,{key:value}),储存很多属性(键值对,属性,属性值)在里面.

清单:

通过浏览器插件vue devtools(vue 开发者工具插件)可以看的到$route属性内部的具体数据:

$route.params,**可以说于$route是一个中间容器**,用来容纳参数,是键值对的方式,这样在这个页面执行动作传递参数到$route.params,在另外一个页面就能从$route.params里拿参数,就这么回事.

在路由里定义

//router >> index.js
{
        path: "/Page9/:abc/:cde",
        name: "Page9",
        component: Page9
    }

意思就是我要往 Vue.$route.params里储存属性"abc"和"cde",它们是作为属性名,键名key,

而属性值则由点击路由后触发路径的变化来决定具体的值.要传输什么就写什么,比如

//App.vue

          点击就跳转到page9,并同时传参到Vue.$route.params

//Page9.vue

意思是最后Vue.$route.params会储存{"abc" : "gigi" ,"cde" : "lkjdk7338"}

或者用编程路由的写法,在脚本js里写要传的参:
html:

js:

sj1() {
                this.$router.push({
                    path: "/Page9",
                    name: "Page9",
                    params: {
                        abc: this.mydata,
                        cde: "dlj"
                    }
                })

意思是是最后Vue.$route.params会储存{"abc" : this.mydata这个数据 ,"cde" : ""dlj""}

如何拿值:
这就很简单了:
直接从Vue.$route.params里拿就行了
{{ $route.params.abc }} --> "gigi" 或者 this.mydata具体的值

{{ $route.params.abc }} --> " lkjdk7338 "

GPU云服务器云服务器 vue的计算属性 vue实例属性 vue.js 属性 vue的cdn加速

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95762.html

vue常用操作及学习笔记（路由跳转及路由传参篇）

摘要：也可以从其他文件进来定义路由每个路由应该映射一个组件。其中可以是通过创建的组件构造器，或者，只是一个组件配置对象。路由跳转 - 超链接方式跳转 html： Hello App! Go to Foo Go to Bar router.js...

megatron 2019-08-23 11:27 评论0 收藏0
vue-router query和params传参(接收参数)$router $route的区别

今天做项目时踩到了vue-router传参的坑（query和params），所以决定总结一下二者的区别。直接总结干货！！！ 1.query方式传参和接收参数传参: this.$router.push({ path:/xxx, query:{ id:id } }) 接收参数: this.$route.quer...

testHs 2019-08-21 18:41 评论0 收藏0
vue路由

摘要：分类子组件中通过获取参数传参路由配置分类父组件中通过路由属性中的来确定匹配的路由，通过来传递参数。分类子组件中通过获取参数区别是把参数放在地址栏上，刷新不会消失，不会把参数放在地址上，刷新后消失 vue路由使用 1.安装vue路由 npm install vue-router 2.在src中新建router/index.js,引入vue路由 import Vue from vue im...

developerworks 2019-08-26 13:50 评论0 收藏0
手挽手带你学VUE：四档 Vue-cli3 Vuex Vue-router

摘要：安装过后到命令行执行检查版本，如果弹出版本的话恭喜你安装成功，我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或，你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。视频教程由于思否不支持视频外链，视频请移步http://www.henrongyi.top 你能学到什么在这一期的学习进度中，我们会开始学习在我们工作开...

Sourcelink 2019-08-02 14:02 评论0 收藏0
手挽手带你学VUE：四档 Vue-cli3 Vuex Vue-router

摘要：安装过后到命令行执行检查版本，如果弹出版本的话恭喜你安装成功，我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或，你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。视频教程由于思否不支持视频外链，视频请移步http://www.henrongyi.top 你能学到什么在这一期的学习进度中，我们会开始学习在我们工作开...

AlphaWallet 2019-08-23 14:28 评论0 收藏0