首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

vue之query和params，$router和$route

2018年11月08日 发布 阅读(3609) 作者：Jerman

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. })
  15. //路由
  16. export default [
  17.     // 登录
  18.     {
  19.         path: "/user/login",
  20.         name: "login"
  21.     }
  22. ];

通过$route，在vue组件里要取到id和username的值

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

© 2018 IMQIANDUAN.COM 粤ICP备18143223号