Nuxt.js 依据
pages
目录结构自动生成 vue-router模块的路由配置。
官方建议:两个页面间跳转使用<nuxt-link>
标签。
<template>
<nuxt-link to="/">首页</nuxt-link>
</template>
下面分享,列表跳转详情的几种方法总结如下:
目录结构
接上一篇nuxt实现导航切换样式,相同目录结构
目录结构
列表跳转详情
- nuxt-link
<nuxt-link :to="`/new/${item.id}`" :title="item.title">
<!-- 此处代码省略 -->
</nuxt-link>
- this.$router.push
getDetails(id, item) {
this.$router.push({
path: `/new/${id}`
})
}
参数接收:
async asyncData({ store, params, error, req }) {
try {
let { id } = params
console.log(id)
//请求文章详情接口
} catch(err) {
console.log(err)
}
}
推荐使用nuxt-link
,跳转页面,更利于seo收录,使用this.$router.push
跳转相同路由存在一些问题。