nuxt实现路由跳转的几种方法

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跳转相同路由存在一些问题。