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

2,060 阅读1分钟

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>