[JavaScript知识库]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>