首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

vue之query和params,$router和$route

2018年11月08日 发布 阅读(339) 作者:懒炖

vue的坑不少,这是要睁大眼睛才能看到的坑:$route$router,相差一个r

控制台看下这两个对象的区别:

上面图片可以看出,URL里传递的相参数都是从对象$route里取(没带r的),而vue-router绑定的方法都是在$router里,如跳转路由的push方法(this.$router.push)

通过query/params的方式传递参数

如URL: http://www.xxx.com/index?id=10,这里的id就是query方式

通过$router设置参数

  1. // 跳转路由
  2. this.$router.push({
  3. path:'/user/login'
  4. // 使用params传参数时,这个name值不能少,路由里也相对应的设置name值
  5. // query可以不用设置name值
  6. name:"login",
  7. query:{
  8. id:id
  9. },
  10. params:{
  11. username:"abc"
  12. }
  13. })
  14. //路由
  15. export default [
  16. // 登录
  17. {
  18. path: "/user/login",
  19. name: "login"
  20. }
  21. ];

通过$route,在vue组件里要取到idusername的值

  1. const id = this.$route.query.id; //10
  2. const username = this.$route.params.username; //abc
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •