VUE的七种动态路由传参

params传参(4种)

1.给路由的规则中配置接收参数

  {
    path: '/details/:yaxu',
    name: 'details',
    component: () => import( '../views/Details.vue')
  },

2.发送数据

（1）编程式导航发送数据2种写法

 1.this.$router.push("/路径/数据")
    示例:this.$router.push('/details/我是从one页面过来的')
    
 2.this.$router.push({name:"你要跳转的那个路由的名字",params:{key:val,key:val}})
   示例:this.$router.push({name:'details',params:{yaxu:'11111111'}})

(2)声明式导航发送数据2种写法 ----- 把编程式push小括号里面的复制过来即可*

1.<router-link to="/路径/数据">newsall</router-link>
示例:<router-link to='/details/我是从one页面过来的'>routerLink1</router-link>  

2.<router-link :to='{name:"你要跳转的那个路由的名字",params:{key:val,key:val}}'>newsall222</router-link>
示例:<router-link :to="{name:'details',params:{yaxu:'11111111'}}">routerLink2</router-link>

3.接收数据

this.$route.params.yaxu

query传参(3种)

注意：不需要再次在路径中配置接收参数

1.发送数据

编程式导航发送数据的3种写法

1.this.$router.push("/路径?key=val&key1=val1&.......")
示例:this.$router.push("/details?yaxu=123")

2.this.$router.push({name:"路由名字",query:{key:val,Key：val1}}) 
示例:this.$router.push({name:'details',query:{yaxu:'3333'}}) 

3.this.$router.push({path:"/路由路径",query:{key:val,Key：val1}})
示例:this.$router.push({path:'/details',query:{yaxu:'44444'}})  

2.接收数据

this.$route.query.yaxu

提示:one.vue和details.vue是平级页面都在views下

params与query的区别

用法上	url展示上
query要用path来引用,params要用name来引用,接受蚕食都是类似的,分别是this.$route.query.name和this.$route.params.name	params类似于post, query更加类似于我们ajax中get传参,说的再简单- -点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一点

本文地址：https://blog.csdn.net/weixin_46058357/article/details/107539430