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

àì夳堔傛蜴生んèń 2023-05-21 15:19 313阅读 0赞

# 动态路由跳转及传递参数 #

<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官网这样说：

> 目前`<nuxt-link>` 的作用和 `<router-link>` 一致，推荐阅读 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][nuxt_ - _ https_www.jianshu.com_p_afd3d9e40806]
 *  [koa-router使用指南 - 简书 https://www.jianshu.com/p/7e0798fe46bb][koa-router_ - _ https_www.jianshu.com_p_7e0798fe46bb]

[nuxt_ - _ https_www.jianshu.com_p_afd3d9e40806]: https://www.jianshu.com/p/afd3d9e40806
[koa-router_ - _ https_www.jianshu.com_p_7e0798fe46bb]: https://www.jianshu.com/p/7e0798fe46bb

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 137 阅读

相关 vue路由传参动态路由

[vue路由传参的三种基本方式][vue] 现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v

快来打我*/ 2023年05月29日 13:30/ 0 赞/ 88 阅读

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

动态路由跳转及传递参数 <nuxt-link :to="{ name: 'products', params: { keyword: item.name }}">

àì夳堔傛蜴生んèń/ 2023年05月21日 15:19/ 0 赞/ 314 阅读

相关 vue的七种动态路由传参

params传参(4种) 1.给路由的规则中配置接收参数 { path: '/details/:yaxu', name: '

柔光的暖阳◎/ 2023年03月01日 10:41/ 0 赞/ 120 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 436 阅读

相关路由传参

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl

末蓝、/ 2022年06月01日 00:14/ 0 赞/ 464 阅读

相关 vue 路由传参

this.$router.push({path:'home',name:'主页'params:{id:1}} 或者 <router-link :to="{

àì夳堔傛蜴生んèń/ 2022年05月29日 09:00/ 0 赞/ 431 阅读

相关路由传参和路由卫士

1.动态路由匹配动态路由也可以叫做路由传参。组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。 1. 动态

古城微笑少年丶/ 2021年08月19日 15:06/ 0 赞/ 647 阅读

相关 vue 路由动态路径传参、路由嵌套

1、路由动态路径传参 (1)使用 1、在路由路径中 routes: [ { path: '/user/:id'

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 20:42/ 0 赞/ 1100 阅读

相关 rn 路由传参、navigation传参

路由传参: (1)传参数 (1)发送函数式传递 function xx({navigation

傷城~/ 2021年07月24日 16:57/ 0 赞/ 1463 阅读