鍍金池/ 問答/HTML/ nuxt-link 跳轉(zhuǎn)與瀏覽器強行跳轉(zhuǎn)表現(xiàn)不一致 ?

nuxt-link 跳轉(zhuǎn)與瀏覽器強行跳轉(zhuǎn)表現(xiàn)不一致 ?

nuxt-link鏈接跳轉(zhuǎn)的路由,console顯示是后臺數(shù)據(jù)請求的路由,最終頁面渲染不出來

我這里采用的是nuxt與express分離起兩個服務(wù),一個中間負(fù)責(zé)服務(wù)端渲染,一個負(fù)責(zé)處理后端數(shù)據(jù)和接口

index.vue,前端路由是 / 去后端/users獲取數(shù)據(jù)

<template>
  <section class="container">
    <img src="~assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
    <h1 class="title">
      USERS
    </h1>
    <ul class="users">
      <li v-for="(user, index) in users" :key="index" class="user">
        <nuxt-link :to="{ name: 'id', params: { id: index }}">
          {{ user.name }}
        </nuxt-link>
      </li>
    </ul>
  </section>
</template>

<script>
import axios from '~/plugins/axios'

export default {
  async asyncData () {
    let { data } = await axios.get('/users')
    console.log(data)
    return { users: data }
  },
  head () {
    return {
      title: 'Users'
    }
  }
}
</script>

_id.vue, /id是前端路由,去后臺/user/id獲取數(shù)據(jù)

<template>
  <section class="container">
    <img src="~assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
    <h1 class="title">
      User
    </h1>
    <h2 class="info">
      {{ user.name }}
    </h2>
    <nuxt-link class="button" to="/">
      Users
    </nuxt-link>
  </section>
</template>

<script>
import axios from '~/plugins/axios'

export default {
  name: 'id',
  asyncData ({ params, error }) {
    console.log(params.id)
    return axios.get('/user/' + params.id)
      .then((res) => {
        return { user: res.data }
      })
      .catch((e) => {
        console.log(params.id)
        error({ statusCode: 404, message: 'User not found' })
      })
  },
  head () {
    return {
      title: `User: ${this.user.name}`
    }
  }
}
</script>

現(xiàn)在的問題是, 從index.vue的nuxt-link跳轉(zhuǎn)到_id.vue時,瀏覽器窗口顯示路由由localhost:3005變成了localhost:3005/:id這種,但是頁面無法正常數(shù)據(jù),只顯示‘user not found’,終端顯示如下
圖片描述

感覺就是沒有進(jìn)入到_id.vue這個頁面來

當(dāng)我直接在瀏覽器窗口輸入localhost:3005/:id時,一切就OK,此時終端顯示為
圖片描述

回答
編輯回答
涼心人

https://github.com/nuxt/nuxt....
npm run build打包成線上項目就可以了

2018年8月13日 12:33