vue路由传值

vue路由传值得几种方式

　　1.params传值：

　　传递：（修改路由后等同于：<router-link :to="'/user/'+item.id">传值</router-link>方式）

    toSecond() {

　　　　  let form= {

          name: "admin",

          age: 12

        }

   　　this.$router.push({
        name: "data-second",
        params: form
      });
    }

　　接收：

   mounted() {
    let params = this.$route.params;
    console.log(params);
    params && (this.form = params);
  },

但你会发现一个问题，接收参数得页面一刷新传递得值就没了，那咋办啊？

解决方法是在路由那里配一下，路径后边加上参数：

    {
          path: "/data-second/:name/:age",
          name: "data-second",
          meta: {title: '接参'},
          component: () => import("@/view/data-bus/index-second")
        },    

这样页面刷新也不会丢失了，因为页面路径变了：http://localhost:8080/#/data-second/admin/12

　　2.query传值：

　　传递：（等同于：<router-link :to="'/user/?id='+item.id">传值</router-link>方式）

    toThird() {

　　　　  let form= {

          name: "admin",

          age: 12

        }

   　　this.$router.push({
        name: "data-second",
        query: form
      });
    }

　　接收：

  mounted() {
    let query = this.$route.query;
    console.log(query);
    query && (this.form = query);
  }

　　它得传递方法是拼接到路径后边得，所以刷新页面数据也不会丢失