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>
目录
相关文章
|
14天前
|
JavaScript
【vue】vue2 导入外部js文件如何拿到方法的返回值
【vue】vue2 导入外部js文件如何拿到方法的返回值
11 1
N..
|
1月前
|
JavaScript 前端开发 数据处理
Vue.js的过滤器和监听属性
Vue.js的过滤器和监听属性
N..
19 1
|
2月前
|
JavaScript Go 网络架构
除了 Vue.js,还有哪些框架支持获取路由参数?
除了 Vue.js,还有哪些框架支持获取路由参数?
15 3
|
7月前
|
存储 移动开发 JavaScript
js -基于SPA的单页面路由
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。简单来说就是用户只需要加载一次页面就可以不再请求,当点击其他子页面时只会有相应的URL改变而不会重新加载。
|
3月前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式
|
4月前
|
JavaScript API
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
|
5月前
|
JavaScript
vue-Nuxt.js服务端渲染发起请求
vue-Nuxt.js服务端渲染发起请求
57 0
|
JavaScript 前端开发 API
Vue.js:Vue-Router动态路由从服务器接口获取路由数据
Vue.js:Vue-Router动态路由从服务器接口获取路由数据
566 0
|
Web App开发 存储 缓存
原生 js 实现一个前端路由 router
原生 js 实现一个前端路由 router
847 0
原生 js 实现一个前端路由 router
Nuxt.js路由参数传递和接收
Nuxt.js路由参数传递和接收
86 0