Nuxt.js路由参数传递和接收

简介: Nuxt.js路由参数传递和接收

路由页面目录:

pages
    detail/
        _id.vue

注意这里路由name的值是: detail-id

参数传递

<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}})

接收参数

created () {

this.$route.query.key
this.$route.params.id
},


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

参考

nuxt路由及传参

            </div>
目录
相关文章
|
9天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
18天前
|
网络架构
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
|
23天前
|
JavaScript
学习和分享关于 Vue.js 的路由(vue-router)
学习和分享关于 Vue.js 的路由(vue-router)
20 2
|
26天前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
24 1
|
1月前
|
JavaScript
Node.js 路由
Node.js 路由
13 3
若依修改,改若依首页,若依修改了路由不出现如何解决,修改路由必须在permission.js中的白名单添加新的路由,修改了路由,不出现,解决方法是在白名单中添加对应的路径:
若依修改,改若依首页,若依修改了路由不出现如何解决,修改路由必须在permission.js中的白名单添加新的路由,修改了路由,不出现,解决方法是在白名单中添加对应的路径:
|
26天前
|
JavaScript 前端开发
Vue.js中使用JavaScript实现路由跳转详解
Vue.js中使用JavaScript实现路由跳转详解
11 0
|
2月前
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
109 1
|
2月前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
17 1
|
2月前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
35 0