Question

我是Vue JS的新手。我的任务是从api获取数据，进行分页以及单击任何帖子时，以便打开一个新页面，其中包含有关该帖子的更多详细信息。我进行了分页，但无法进行过渡。单击帖子后，链接会更改，但不会执行过渡。为什么链接中的路径会更改，而未执行到该地址的转换？

Project on GitHub

主页代码：

<template>
  <div id="app">
      <ul>
        <li v-for="(post, index) of paginatedData" class="post">
          <router-link :to="{ name: 'detail', params: {id: index} }">
          <img src="src/assets/nature.jpg">
          <p class="boldText"> {{ post.title }}</p>
          </router-link>
          <p> {{ post.body }}</p>
        </li>
      </ul>



  </div>
</template>

<script>
import axios from 'axios';
export default {
  el: "#app",
  data () {
    return {
      current: null,
      page: 0,
      posts: [],
      }
    },
    created(){
      this.getData()
    },
    methods: {
    setCurrent: function(id) {
      this.current = id;
    },
    getData() {
      axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
        this.posts = response.data
      })
    },
  }
  }
</script>

要转到的页面代码：

<template>
  <div class="post" v-if="detail">
    <img src="src/assets/nature.jpg">
    <h2>{{ post.title }}</h2>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
  module.exports = {
    data: function() {
      return {
        posts: [],
      }
    },
    created: function() {
      var postId = this.$route.params.id
      this.post = this.posts[postId]
    }
  }
</script>

main.js代码：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'


var Detail = require('./Detail.vue')

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    {path: 'detail/:id', name: 'detail', component: Detail }
  ]
})

new Vue({
  el: '#app',
  render: h => h(App),
  router: router,
}).$mount('#app');

Answer 1

First of all, in your Pagination.vue file you should use the character entity instead of the <etc.

Secondly, the routing change page is rendered, that is, the problem you describe is because you have less <router-view/> component, um, maybe you need to take a good look at vue-router

Finally, I feel that your html semantics and code specifications are poor, so you need to strengthen

i clone u project and run. The code has a lot of bugs

good u lucky

为什么链接中的路径会更改，并且不执行到该地址的转换？

1 个答案: