个人技术总结

Posted 2020-12-12 h9ui

一、技术概述

我要介绍的是Vue传参的三种方式。这个技术算是比较基础的，不会很难，但是基本每个项目都要用到，所以写下这篇博客。主要的运用场景：点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。

二、技术详述

父组件(template部分)：

<li v-for="invitation in invitations" @click="getDetail(invitation.id)">
  {{invitation.title}}
</li>

方式一

父组件(js部分)

methods: {
  getDetail(id) {
    //   直接调用$router.push 实现携带参数的跳转
    this.$router.push({
      path: `/community/detail/${id}`,
    })
  }
},

需要配置的路由如下

{
  path: ‘/community/detail/:id‘,
  name: ‘PostDetail‘,
  component: PostDetail
}

子组件如何获得id

this.$route.params.id

方式二

父组件(js部分)：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods: {
  getDetail(id) {
    this.$router.push({
      name: ‘PostDetail‘,
      params: {
        id: id
      }
    })
  }
},

需要配置的路由如下

{
  path: ‘/community/detail/:id‘,
  name: ‘PostDetail‘,
  component: PostDetail
}

子组件如何获得id

this.$route.params.id

方式三

父组件(js部分)：使用path来匹配路由，然后通过query来传递参数。这种情况下 query传递的参数会显示在url后面?id=？

methods: {
  getDetail(id) {
    this.$router.push({
      path: ‘/describe‘,
      query: {
        id: id
      }
    })
  }
},

需要配置的路由如下

{
  path: ‘/community/detail‘,
  name: ‘PostDetail‘,
  component: PostDetail
}

子组件如何获取id

this.$route.query.id

三、技术使用中遇到的问题和解决过程。

vue路由跳转报错解决

vue路由跳转：

setTimeout(function () {
   console.log(this);
   this.$router.push("/login");
},800)

上面是一个简例，语法没问题但是报错:

MyFollow.vue?c93c:119 Uncaught TypeError: Cannot read property ‘push‘ of undefined

这时候说明this指向不一样了，要打印一下this 看看。
发现setTimeout函数里的this指向的不是vue对象而是window,改为箭头函数即可解决

settimeout 的function会改变this指向并指向全局window,如果不改变this指向 ，这里要使用箭头函数
setTimeout(()=>{
this.$router.push("/login");
},100)

这个问题困扰了我很久，算是个比较基础的错误，耗费了很长时间查询资料和看文档，最终在朋友的帮助下成功解决。

四、总结

虽然这篇博客总结的知识较为简单，但路由配置是Vue项目构建中的重点和难点，只要理解原理，就不会觉得复杂了。如果希望从列表跳转至详情页，就需要用到这样的方法，这些基础的东西是开发基于vue框架的项目必须掌握的。

五、参考文献

Vue官方文档

vue路由传参的三种基本方式