通过Vue属性$route的params传参

这篇文章主要介绍了关于通过Vue属性$route的params传参，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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
9d4149ed83e58db2330bdaf44b5ac161
          点击就跳转到page9,并同时传参到Vue.$route.params
d625018d6d57dc2163f3a71531b24864

//Page9.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
    bd7b24ca0ffc74f011b9f2d589dd42fe
        4a249f0d628e2318394fd9b75b4636b1{{ msg }}473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846bee{{this.$route.params}}94b3e26ee717c64999d7867364b1b4a3
        f6c84b063dcda6eb4aaf4559045f6db8拿数据39528cedfa926ea0c01e69ef5b2ea9b0
    94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
    export default{
        name:'Page9',
        data(){
            return{
                msg:'I am Page9.vue'
            }
        },
        methods:{
            nsj(){
                this.msg = this.$route.params.asd
            }
        }
        
    }
2cacc6d41bbb37262a98f745aa00fbf0

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

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

e388a4556c0f65e1904146cc1a846beee6d69e7a9baae27929cfae929aada0ed点击就跳转到page9,并同时传参到65281c5ac262bf6d81768915a4a77ac094b3e26ee717c64999d7867364b1b4a3

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 "

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

vue-router+nginx非根路径的配置方法

vue如何解决addRoutes动态添加路由后刷新失效的问题

以上是通过Vue属性$route的params传参的详细内容。更多信息请关注PHP中文网其他相关文章！