阿狗工具

路由传参的三种方式

路由跳转有2种方式
1.标签式跳转
router-link 标签跳转 router-link会被解析成a便签 利用a标签的href属性

2.编程式跳转 用js的方式实现跳转

query传参

• path 和name都可以
• query传对象的时候 一定要先JSON.stringify('参数'), 获取 JSON.parse('参数')
• query传参地址栏可见 ，问号后就是我们的参数

params传参

• 只能使用name传参
• 传对象的时候不需要转换为字符串，但是有一个弊端 就是第一次进来的时候能拿到参数，刷新会丢失

怎么解决刷新参数会消失的弊端？？

• 在created钩子函数里面存本地 localStorage.setItem('params',JSON.stringify(this.$route.params.obj))
• beforeDestroy里面清除本地
  localStorage.removeItem('params')

动态路由传参

• 他的原理就是params

• 在router/index.js 的路由规则里面给他设置 —>动态 :

• 动态路由传多个参数 path: '/about/:user/:grades'

• 传 this.{item.name}/${item.grades}`)

• 接this.$route.params 是一个对象，参数都在这个对象里