VUE路由传值的方式有哪几种

Vue-Router 传参可以分为两大类

分别是编程式的导航 router.push 和声明式的导航<router-link>

一、编程式的导航 router.push

编程式导航传递参数有两种类型:字符串、对象。

字符串 :

        字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:

this.$router.push("home");

对象 :

        想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数

命名路由 这种方式传递参数,目标页面刷新会报错
       
this.$router.push({name:"news",params:{userId:123})
 查询参数 和 name 配对的式 params,和 path 配对的是query
    
    this.$router.push({path:"/news',query:{uersId:123})
    
 接收参数 this.$route.query

二、声明式的导航<router-link>

字符串:

<router-link to:"news"></router-link>

命名路由:

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

查询参数

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>