码迷,mamicode.com
首页 > 其他好文 > 详细

个人技术总结

时间:2020-06-25 15:36:07      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:ams   for   运用   desc   tin   method   列表   des   打印   

一、技术概述

我要介绍的是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路由传参的三种基本方式

个人技术总结

标签:ams   for   运用   desc   tin   method   列表   des   打印   

原文地址:https://www.cnblogs.com/H9ui/p/13191712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!