路由传参的三种方式
路由跳转有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 是一个对象,参数都在这个对象里