Nuxt中的动态路由参数传值

最新推荐文章于 2024-08-05 08:35:00 发布
最新推荐文章于 2024-08-05 08:35:00 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43750656/article/details/106861839
版权

在nuxt中，动态路由传值可以使用this.$route.params.xxx这个xxx在取参数值的时候要和文件名匹配，而且文件名要以_开头。

在这里插入图片描述
效果：
在这里插入图片描述

如果我们将文件名改成_id
在这里插入图片描述
这次直接打印this.$route对象
在这里插入图片描述
则参数名就成了id。

DanceDonkey
关注
专栏目录
Nuxt - 实现动态路由传递多个参数，路径 URL 上增加多个以 “/“ 斜线分割的参数（不使用 _id.vue 创建文件这种方式）详细示例教程，新手小白直接上手！
王佳斌
04-18 2934
nuxt 动态路由详细教程，nuxt 如何实现动态路由，nuxt项目怎么在路由上拼接多个参数，nuxt怎么自定义路由多个参数，nuxt 路由怎么实现 / 斜线分割的参数，nuxt 如何在路由上加入斜杠/参数示例教程，nuxt路由传多个参数，nuxt.js 怎样配置带参路由，nuxt动态路由怎样传多个参数，nuxt自定义路由多个参数，nuxt如何自定义路由的参数,不想使用_下划线建文件夹定义，nuxt路由上传递多个参数，nuxt路由上用斜线/分割,传递多个参数的教程，nuxt extendRoutes配置详解
Nuxt3 - 实现页面给 layouts 布局模板传递参数，在页面中通过 props 传递给布局模板参数，实现个性化布局教程（页面使用布局模板时，如何给layout布局传参数问题详解）
王佳斌
10-27 2726
nuxt3，nuxt3 layout传值传参，nuxt3布局模板传递参数，nuxt3 layout布局props传参，nuxt3页面怎么layouts模板传递参数呢，nuxt3在页面中怎么给布局组件传自定义props参数，nuxt3页面给布局layout传参数，nuxt3如何在page页面传值给layout页面，nuxt3使用一套布局模板时怎么实现某个页面个性化布局，nuxt3页面page传值给布局组件layout详细教程，nuxt3如何从普通页面传递参数给布局，layout布局模板接收页面传递过来的参数，
Nuxt框架的路由跳转及传参
01-20
最近做毕设的项目用到了Nuxt框架，路由跳转一直在用到，有时候容易搞混，所以在这里总结一下。大致可以分成三种方式 第一种：url地址直接跳转 在Nuxt框架自带的pages文件夹下创建文件夹以及页面。 （1）如果跳转的url地址(路由地址)是“/course”，那么框架就会自动帮我们处理，跳转到pages文件夹下course 文件夹下的index.vue界面，命名要严格按照这种格式命名。 （2）如果跳转的url地址是后面接了id，如，那么页面就会跳转至 _id.vue界面，这个文件的命名是框架设定好的，所以必须这样命名，前面要加_下划线符号。 第二种：params 传值(id会显示在地址栏
【Nuxt】编程式导航和动态路由
最新发布
小秀的博客
08-05 375
除了可以使用navigateTo，还支持 useRouter（用法相同） 进行编程式导航。通过 useRoute() 可以获取动态参数（route.params）。查询字符串参数通过 route.query 获取。
Nuxt 动态路由传参
weixin_47534468的博客
03-23 4291
今天说一下在 nuxt 框架中的三种传参方式 写在前面，先看一下页面所在文件夹位置 在 pages 下有个 basicinfo 文件夹，此文件夹下面有两个文件，index.vue 和 _id.vue 1、使用 router-link 1.1、使用 params 传参 <router-link :to="{name: 'basicinfo', params: {name: 'qwe', age: 23}}">测试</router-link> 会跳转到 basicinfo
nuxt 基本路由+动态传参
qq_55961367的博客
06-18 402
在下方创建xxx.vue文件作为父组件文件，在创建一个与它同名的文件夹。建立pages文件路由目录。nuxt3的文件结构。
nuxt框架中路由动态传参及结构分析
Mangojjx的博客
04-09 1574
刚入公司的小白，接手nuxt项目，经常会用到路由传参,故在此有所总结了下nuxt中传参的方式 nuxt https://zh.nuxtjs.org/guide/ 官方文档 简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO 结构分析 动态路由传参 传参：`<nuxt-link :to="{path:'/about',query:{i...
nuxt 带参数动态路由
Maggie柒哈哈的博客
08-18 3452
nuxt是基于vue.js服务端渲染的框架，其中路由文件不像vue项目那样手动配置，而是依据 pages 目录结构自动生成 vue-router 模块的路由 配置。 基于项目seo优化需求，需要将路由改为动态路由。 一、创建带参数的动态路由（两种方法） 方法一、直接创建一个带参数的动态路由 新建文件的时候直接创建带参数的动态路由，这个官网中有介绍，我就不总结了，附上官网地址： [https://www.nuxtjs.cn/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%
nuxt this.$route 传值方式
05-19
在 `nuxt.config.js` 中配置动态路由： ```js export default { // ... router: { extendRoutes(routes, resolve) { routes.push({ name: 'myRoute', path: '/my-route/:id', component: resolve(__dirname,...
<nuxt-child> 传值
06-08
在使用 `<nuxt-child>` 传值时，可以通过在父组件中使用 `$route` 对象来传递参数。具体步骤如下： 1. 在父组件中，将要传递的参数添加到 `$route` 对象的 `params` 属性中，如下所示： ``` this.$router.push({...
路由传值
weixin_44727080的博客
03-24 2816
注意1.父组件push使用this.$router.push 2.在子组件中获取参数的时候是this.$route.params 1 、动态路由传值 1.1 配置动态路由 routes:[ //动态路由参数 以冒号开头 {path:'/user/:id',conponent:User} ] 1.2 传值 第一种写法 : <router-link :to="'/user/'+item.id">传值&lt
angular 路由，传值，http
11-03
angular 路由，传值，http
路由的传值
Erictezx的博客
12-08 899
基本传值: 传： this.$router.push('/path地址?参数名=参数值&参数2=值2') this.$router.push({ path:'/path地址', query:{ 参数名:值 、。。。 } }) 收 this.$route.query.参数名 动态路由匹配: 配制路由 ...
路由url传值
Academia_zhen的博客
07-27 769
router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode:'history', base:__dirname, routes: [ {path:'/'}, {path:'/params/:aaa/:b
路由传值的方法
weixin_72953424的博客
07-26 2564
南风知我意，吹梦到西洲
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值