the route of nuxt-link link jump. Console shows the route of background data request, and the final page cannot be rendered.
what I use here is that nuxt and express separate two services, one is responsible for server-side rendering, and the other is responsible for processing back-end data and interfaces
index.vue, front-end route is / go to the backend / users to get data
<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 is a front-end route, go to the background / user/id to get data
<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> the problem now is that when you jump from index.vue "s nuxt-link to _ id.vue, the browser window shows that the route has changed from localhost:3005 to localhost:3005/:id, but the page does not have normal data. Only the user not found", terminal displays the following
_id.vue
localhost:3005/:idOK