Vue-router 传参的三种方法以及$router与$route的区别

Vue-router 传参的三种方法

• 第一种方法 页面刷新数据在不会丢失

  • 代码如下：
    
  • 需要对应的路由的配置如下：
    
  • 获取id的方法：this.$route.params.id

• 第二种方法 页面刷新数据会丢失

  • 通过路由属性中的name来确定匹配的路由，通过params来传递参数。
  • 代码如下：
    
  • 对应路由配置:！注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

  

  • 获取id的方法：this.$route.params.id

• 使用path来匹配路由，然后通过query来传递参数

  • 这种情况下 query传递的参数会显示在url后面?id=？
  • 代码如下：
    
  • 对应路由配置：
    
  • 获取id的方法：this.$route.query.id

  route和router的区别

    	$ router是路由操作对象，对要跳转的路由进行编写，
    	而使用$ route我们来从浏览器中读取路由参数，
    	$ router只写要跳转的路由， $ route 只读（参数的获取）
  

  扩展：query 和 param 的区别

    	使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。
    	接收参数的时候使用this.$ route.params.name或者this.$ route.query.name
    	进行路由跳转的时候，我们使用this.$ router.push('路径')
    	如果index.js配置路由时，我们能看到，params的参数是URL不可或缺的一部分，但是query的参数是拼接起来的
  

  • 总结：以上是本期内容，谢谢观看！