通过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
<router-link to="/Page9/gigi/lkjdk7338">
 点击就跳转到page9,并同时传参到Vue.$route.params
</router-link>

//Page9.vue
<template>
 <p class="page1">
 <h1>{{ msg }}</h1>
 <p>{{this.$route.params}}</p>
 <h3 @click="nsj">拿数据</h3>
 </p>
</template>

<script>
 export default{
 name:'Page9',
 data(){
 return{
 msg:'I am Page9.vue'
 }
 },
 methods:{
 nsj(){
 this.msg = this.$route.params.asd
 }
 }
 
 }
</script>

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

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

<p><button @click="sj1">点击就跳转到page9,并同时传参到</button></p>

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 "