个人技术总结
一、技术概述
我要介绍的是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框架的项目必须掌握的。
