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>
目录
相关文章
|
2月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
JavaScript 前端开发
js如何传递参数
js如何传递参数
105 0
|
JavaScript
js中函数的传递参数
js中函数的传递参数
115 0
|
5月前
|
JavaScript API
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
|
5月前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式
|
Web App开发 存储 缓存
原生 js 实现一个前端路由 router
原生 js 实现一个前端路由 router
913 0
原生 js 实现一个前端路由 router
|
JavaScript 前端开发 API
Vue.js:Vue-Router动态路由从服务器接口获取路由数据
Vue.js:Vue-Router动态路由从服务器接口获取路由数据
643 0
Nuxt.js路由参数传递和接收
Nuxt.js路由参数传递和接收
119 0
Nuxt.js路由重定向
Nuxt.js路由重定向
97 0
|
JavaScript 前端开发 API
你不知道的js中关于this绑定机制的解析[看完还不懂算我输]
前言 最近正在看《你不知道的JavaScript》,里面关于this绑定机制的部分讲的特别好,很清晰,这部分对我们js的使用也是相当关键的,并且这也是一个面试的高频考点,所以整理一篇文章分享一下这部分的内容,相信看本文的解析,你一定会有所收获的,如果喜欢的话可以点波赞/关注,支持一下。 游泳、健身了解一下:博客、前端积累文档、公众号、GitHub 为什么要用this: function identify() { console.log("Hello,I'm " + this.name); } let me = { name: "Kyle" }; let you = { nam
113 0
你不知道的js中关于this绑定机制的解析[看完还不懂算我输]