路由传参

路由传参总结

1. 路由跳转的两种方式

• 声明式导航：点击链接实现导航的方式，a或者router-link
• 编程式导航：调用API实现导航的方式，this.$router.push()或者location.href

2. 路由传参方式

2.1 params传参-显示参数

显示参数的意思就是：会在URL地址中展示出参数

• 声明式router-link:

  

  • 父组件： 通过router-link的to属性进行传参
  • 路由配置文件中：要对子路由提前配置好参数
  • 子组件： 通过$route.params.xxx进行参数的获取

• 编程式this.$route.push:

  和上面大差不差…

  

2.2 params传参-不显示参数

如果不向在URL中显示参数：需要通过路由的别名name进行传值

• 声明式router-link:

  

  • 父组件：router-link的to属性需要动态绑定传对象形式的参数
  • 路由配置文件中：给路由规则相同的name值
  • 子组件： 通过$route.params.xxx进行参数的获取

• 编程式this.$route.push:

  

2.3 query传参

query作为查询参数是肯定会显示在URL中的，以？开始。

• 声明式router-link: （类比2.2的声明式）

  

  • 父组件：router-link的to属性需要动态绑定传对象形式的参数，只不过params属性换成query属性进行赋值传递
  • 路由配置文件中：给路由规则相同的name值
  • 子组件： 通过$route.query.xxx进行参数的获取

• 编程式this.$route.push:

  

3. 常见面试题

• 路由传递参数（对象形式）path是否可以结合params参数一起使用？

  达咩！！！path的写法传参需要在规则里进行占位而不能使用params一起使用

• 如何指定params参数可传不可传？

  如果路由要求传递params参数但是你就不传，URL会出问题。

  在配置路由的时候，占位后面加？

• 如果params传空字符串怎么办？

  使用undefined

• 路由组件能不能传递props数据？

  可以

reference: 008-尚硅谷-尚品汇-路由传递参数_哔哩哔哩_bilibili