nuxt页面跳转_nuxt路由及传参

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

nuxt

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

方式一： 如图：

image

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

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

// 跳转到houses文件下的_id.vue详情页

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传值(会显示在地址栏)

// 传递参数

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页面不会报错， 在修改和新增数据的用同一个页面的时候这种做法非常有效。