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

àì夳堔傛蜴生んèń 2023-05-21 15:19 247阅读 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 条评论，247人围观）

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

相关阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 101 阅读

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

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

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

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

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

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

相关 vue路由传参

vue路由跳转页面传参 1、使用路由url携带参数传递主页Main.vue模板脚本 <template> <div class="hell

迷南。/ 2022年11月29日 13:28/ 0 赞/ 352 阅读

相关 angular 路由传参

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

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

相关路由传参

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

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

相关 vue 路由传参

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

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

相关路由传参和路由卫士

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

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

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

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

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

相关 rn 路由传参、navigation传参

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

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