nuxt路由及传参

最近的nuxt项目中经常会用到路由传参,故在此有所总结了下nuxt中传参的方式和vue项目中传参的方式

nuxt

作为SSR的nuxt项目中路由是根据pages下的文件结构自动生成的，无需手动配置路由。很多时候项目需求，有列表页和详情页。
方式一： 如图：

 

image

 

详情页命名为 _id.vue (不要问我为什么要用这个名字 大概是nuxt默认)

params 传值(id会显示地址栏，其他参数不会显示在地址栏)

//  跳转到houses文件下的_id.vue详情页
 <nuxt-link target="_blank" :to="{name: 'log-id', params:{id: n.id,key:value}}"></nuxt-link>
 this.$router.push({ path: '/log/' + (_idl || 'new')}) 
this.$router.push({ name: 'log-id',params:{id:12,key:value}) 

接收：
async asyncData ({ params }) { //  params.id 就是我们传进来的值}
// 或者 
created () { this.$route.params.xxx}

query传值(会显示在地址栏)

// 传递参数
<nuxt-link target="_blank" :to="{name: 'houses',query:{need_type:'INVEST', district:item}}" ></nuxt-link>
this.$router.push({ path: `/log/${_idl}`,query: { key: value, key: value }})

// 接收参数：
created () { this.$route.query.xxx this.$route.query.xxx }
asyncData ({ app, query}) {
   query.site_id = siteId
 }

name: 'houses-id' 是指 houses文件加下的 _id.vue页面 name可以在 .nuxt文件夹下的 router页面
页面的/xxx/ 后面必须传值 数字，字母皆可， 此处用new的原因是 当_idl 为空的时候 进入log/_id.vue页面不会报错， 在修改和新增数据的用同一个页面的时候这种做法非常有效。