当前位置： 移动技术网 > IT编程>脚本编程>vue.js > VUE的七种动态路由传参

VUE的七种动态路由传参

2020年07月24日  | 移动技术网IT编程  | 我要评论

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.query.name和this.route.params.name params类似于post, query更加类似于我们ajax中get传参,说的再简单- -点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一点

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网