转载 

Nuxt.js中路由传参及接收方式

分类:前端    774人阅读    IT小君  2021-04-20 22:51

加入页面文件结构如下:

pages
    detail/
        _id.vue

则页面路由name的值是: detail-id

也可以查找.nuxt\router.js查看路由name,如图:



参数传递方式

<nuxt-link :to="{name: 'detail-id', params:{id: id}, query: {key, value}}"></nuxt-link>
或者
this.$router.push({ name: 'detail-id', params:{id: 10}, query: {key, value}})

notice: 参数传递方式必须使用name 模式,使用path 无效


参数接收方式:

created () { 
    this.$route.query.key
    this.$route.params.id
},


asyncData ({ app, query, params}) {
   query.key
   params.id
 }



支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»