vue-router编程式导航传参

vue-router 编程式导航传参

总体上可以分为俩种方式，使用path 匹配路径传参，使用name 匹配路由名传参

path 传参

此种模式下 不能使用params 传参

• 直接使用字符串拼接 this.$router.push("about?age=18");
• 使用对象的形式:

•       this.$router.push({
          path: "about",
          query: { age: 18, name: "lisi" },
        });
  

路径内容：

• 对于以上俩种，我们可以使用$route.query 获取我们传递的参数

name 传参

使用路径名传参 既可以使用query 又可以使用 params

• 此时 query 只能使用 对象的形式：

  •   this.$router.push({
        name: "mime",
        query: {
          id: 8282,
          test: "sdsd",
        },
      });
    

• 使用params 传参

  •   this.$router.push({
        name: "mime",
        params: { id: 996 },
      });
    

  • 页面没有任何变化 通过$route.params 获取到的也是{} 空对象
  • 打开控制台发现有个警告
  • 
  • 打开上面的链接，它告诉我们这是vue-router的一个重要更新，之前我们通过 params 传参，再次刷新页面时，数据会丢失，这次更新解决的就是这个问题，要想使用params 传参，我们必须设置对应的动态路由

  •    {
        path:"/mime/:id", // 动态路由是 id 那么params 里面也必须有id,
        name:"mime"
        },
    

• 通过以上，我们发现使用query 传递参数 把所有信息都会暴露到路径上，使用params 传递参数 只会将对象的值暴露在路径上

• 如果我们不想任何的信息暴露出去，可以使用history 中的state ，这也是官方推荐的方法之一，

  • $router.push({ name: 'somewhere', state: { id:996,test:"test"} }),
  • 可以通过console.log(window.history.state);获取我们传递的数据
  • 

• 想要了解更多 => github 原地址 更新说明