nuxt:nuxt-link的动态路由和传参

动态路由跳转及传递参数

<nuxt-link :to="{ name: 'products', params: { keyword: item.name }}">{{ item.name }}</nuxt-link>

跳转页接受参数

1. 在async asyncData(ctx)方法里获取参数

注意: 由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

服务端使用koa2，koa动态路由获取参数的方法为：

ctx.params

注意：使用该方法获取路由需要在async asyncData()方法里

具体写法：

async asyncData(ctx) {
	console.log(ctx.params.keyword) // ctx.params.xxx即可获得nuxt-link里传递的参数
}

2. 在created() 生命周期里获取参数

关于nuxt-link，nuxt官网这样说：

目前 的作用和 一致，推荐阅读 Vue路由文档 来了解它的使用方法。

也就是说nuxt-link的使用和router-link一致，所以在接受参数方面也参考router-link。

在created() 生命周期里获取参数具体写法：

created() {
  console.log(this.$route.params.keyword); // 同样可以获得参数
},

总结

两种写法在不同的生命周期里，调用的方式也不同，在async asyncData周期里使用的是上下文ctx，在created周期里使用的是this，这个是我们需要注意的地方。

重要参考

• nuxt路由及传参 - 简书 https://www.jianshu.com/p/afd3d9e40806
• koa-router使用指南 - 简书 https://www.jianshu.com/p/7e0798fe46bb