vue-router参数传递

vue-router参数传递

一、传递参数的方式

1.传递参数主要有两种类型: params和query

• params的类型:
  • 配置路由格式: /router/:id
  • 传递的方式: 在path后面跟上对应的值
  • 传递后形成的路径: /router/123, /router/abc
• query的类型:
  • 配置路由格式: /router, 也就是普通配置
  • 传递的方式: 对象中使用query的key作为传递方式
  • 传递后形成的路径: /router?id=123, /router?id=abc

2. 参数传递方式

• 方式一：<router-link>
  
• 方式二：JavaScript代码
  

3. 获取参数

• 获取参数通过$route对象获取的.
  • 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。
• 通过$route获取传递的信息如下:
  
  

4. 界面展示