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路由及传参

相关文章
|
4月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
N..
|
7月前
|
JavaScript 前端开发 数据处理
Vue.js的过滤器和监听属性
Vue.js的过滤器和监听属性
N..
53 1
|
JavaScript 前端开发
js如何传递参数
js如何传递参数
114 0
|
7月前
|
JavaScript Go 网络架构
除了 Vue.js,还有哪些框架支持获取路由参数?
除了 Vue.js,还有哪些框架支持获取路由参数?
37 3
|
JavaScript
js中函数的传递参数
js中函数的传递参数
127 0
|
7月前
|
JavaScript API
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
|
7月前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式
|
JavaScript
vue-Nuxt.js服务端渲染发起请求
vue-Nuxt.js服务端渲染发起请求
136 0
|
Web App开发 存储 缓存
原生 js 实现一个前端路由 router
原生 js 实现一个前端路由 router
940 0
原生 js 实现一个前端路由 router
|
存储 JavaScript 前端开发
js实现传参方法
js实现传参方法
207 0
下一篇
DataWorks