Как отобразить содержимое на основе параметров, полученных от vue-router? - PullRequest
Новая
       3

Как отобразить содержимое на основе параметров, полученных от vue-router?

0 голосов
/ 26 апреля 2019

Я использую Vue 3.6.3 для создания страницы со списком фильмов.Домашняя страница показывает список фильмов, включает только краткую информацию о каждом фильме, и пользователь может щелкнуть заголовок заголовка каждого фильма, чтобы перейти на страницу, где есть подробная информация о фильме.Я использую vue-router, чтобы помочь мне с переходом.

Корневым компонентом является App.vue, на самом деле он ничего не делает, только показывает свои дочерние компоненты.

важные коды в App.vue: 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Маршрутизатор смонтирован на App.vue, я создал файл routers.js для определения маршрутов, а затем сделал маршрутизатор в файле main.js.

с маршрутизаторов..js: 

import App from './App.vue'
import FilmList from './components/FilmList.vue'
import DetailPage from './components/DetailPage.vue'

const routers = [{
    path: '/',
    redirect: '/filmlist',
    component: App,
    children: [{
            path: '/filmlist',
            name: 'filmlist',
            component: FilmList
        },
        {
            path: '/detail/:id',
            name: 'detail',
            component: DetailPage
        }
    ]
}]
export default routers

коды из main.js: 

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

Vue.use(VueRouter)
Vue.config.productionTip = false

const router = new VueRouter({
    mode: 'history',
    routes: routes
})

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

У компонента App.vue есть два дочерних элемента, FilmList и DetailPage.Сначала будет показан FilmList, после того как пользователь щелкнет по одному из них, он перейдет на страницу сведений о конкретном фильме на основе параметра id в маршрутизаторе.После получения параметра id файл DetailPage.vue должен выбрать один из фильмов из списка фильмов и отобразить его подробное содержание.

коды из FilmList.vue: 

<template>
  <div id="filmlist">
    <film-brief
      v-for="(film, index) in filmList[pageIndex-1]"
      v-bind:key="film._id"
      v-bind:index="index + groupCount*(pageIndex-1)"
      v-bind:film="film"
    ></film-brief>
    <div class="buttons">
      <jump-button
        class="button"
        v-for="index in buttonIndexList"
        :key="index.id"
        v-bind:index="index"
        v-on:jump-page="pageIndex = index.id"
      ></jump-button>
    </div>
  </div>
</template>

<script>
import FilmBrief from "../components/FilmBrief.vue";
import films from "../assets/films.json";
import JumpButton from "../components/JumpButton.vue";

const GroupCount = 10;

export default {
  name: "FilmList",
  data: function() {
    return {
      films,
      pageIndex: 1,
      pageCount: Math.ceil(films.length / GroupCount),
      groupCount: GroupCount
    };
  },
  components: {
    FilmBrief,
    JumpButton
  },

......

кодов из FilmBrief.vue: 

<template>
  <div class="film-brief">
    <div class="poster">
      <img :src="imgSrc">
    </div>

    <div class="info">
      <router-link
        :to="{
        name: 'detail',
        params: {
          id: index
        }
        }"
      >
        <div class="heading" v-html="title"></div>
      </router-link>

      <div class="ratings">{{film.rating.average}}</div>
      <div class="ontime">{{pubdate}}</div>
      <div class="type">{{genres}}</div>
    </div>
  </div>
</template>

<script>
import errorImg from "../assets/imgErr.jpg";

export default {
  name: "FilmBrief",
  props: ["film", "index"],
  data: function() {
    return {
      imgSrc: "",
      imgErrSrc: errorImg
    };
  },
  methods: {
    loadImg(resolve, reject) {
      let originImgSrc = this.film.poster;
      let img = new Image();
      img.src = originImgSrc;

      img.onload = function() {
        resolve({
          src: img.src
        });
      };

      img.onerror = function(e) {
        reject(e);
      };
    }
  },
  created: function() {
    this.loadImg(
      response => {
        this.imgSrc = response.src;
      },
      reject => {
        console.log("图片加载失败");
        this.imgSrc = this.imgErrSrc;
      }
    );
  },
......

кодов из DetailPage.vue: 

<template>
  <div class="detail-page">
    <div class="poster">
      <img :src="this.imgSrc">
    </div>
    <div class="details">
      <ul>
        <li id="title" v-html="title"></li>
        <li id="director">{{directors}}</li>
        <li id="writers">{{writers}}</li>
        <li id="casts">{{casts}}</li>
        <li id="genres">{{genres}}</li>
        <li id="duration">{{duration}}</li>
        <li id="pubdate">{{pubdate}}</li>
        <li id="summary"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import errorImg from "../assets/imgErr.jpg";
import films from "../assets/films.json";

export default {
  name: "DetailPage",
  props: [],
  data: function() {
    return {
      id_: this.$route.params.id,
      film: films[id_],
      imgSrc: "",
      imgErrSrc: errorImg,
      duration: "片长：" + this.film.duration + "分钟",
      summary: "简介：" + this.film.summary
    };
  },
  methods: {
    loadImg(resolve, reject) {
      let originImgSrc = this.film.poster;
      let img = new Image();
      img.src = originImgSrc;

      img.onload = function() {
        resolve({
          src: img.src
        });
      };

      img.onerror = function(e) {
        reject(e);
      };
    },
    getList(name, list) {
      let result = "";
      result += name;
      for (let i = 0; i < list.length; i++) {
        result += list[i].name;
        if (i !== list.length - 1) {
          result += " / ";
        }
      }
      return result;
    }
  },
  created: function() {
    this.loadImg(
      response => {
        this.imgSrc = response.src;
      },
      reject => {
        console.log("图片加载失败");
        this.imgSrc = this.imgErrSrc;
      }
    );
  },
  computed: {
    title: function() {
      let originalTitle = "";
      originalTitle += this.film.title;
      let index = originalTitle.indexOf(" ");
      let input = originalTitle[index - 1];
      let isPunc =
        (input >= "A" && input <= "Z") || (input >= "a" && input <= "z");
      if (!isPunc) {
        return (
          originalTitle.slice(0, index) +
          "<br>" +
          originalTitle.slice(index + 1)
        );
      } else {
        return originalTitle;
      }
    },
    directors: function() {
      return this.getList("导演：", this.film.directors);
    },
    writers: function() {
      return this.getList("编剧：", this.film.writers);
    },
    casts: function() {
      return this.getList("主演：", this.film.casts);
    },
    genres: function() {
      let genres = this.film.genres;
      let str = "";
      for (let i = 0; i < genres.length; i++) {
        str += genres[i];
        if (i !== genres.length - 1) {
          str += " / ";
        }
      }
      return str;
    },
    pubdate: function() {
      let dates = this.film.pubdate;
      if (dates[0] === "") {
        return "上映时间未知";
      } else {
        return "上映时间：" + dates[0];
      }
    }
  }
};
</script>

После нажатия маршрут, отображаемый в браузере, в порядке, например "http://localhost:8080/detail/11", однако на странице ничего не отображается, и ошибка в консоли выглядит примерно так: 

[Vue warn]: Error in data(): "ReferenceError: id_ is not defined"

found in

---> <DetailPage> at src/components/DetailPage.vue
       <App> at src/App.vue... (1 recursive calls)

ReferenceError: id_ is not defined
    at VueComponent.data (DetailPage.vue?b507:31)
    at getData (vue.runtime.esm.js?2b0e:4742)
    at initData (vue.runtime.esm.js?2b0e:4699)
    at initState (vue.runtime.esm.js?2b0e:4636)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5000)
    at new VueComponent (vue.runtime.esm.js?2b0e:5148)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
    at init (vue.runtime.esm.js?2b0e:3114)
    at merged (vue.runtime.esm.js?2b0e:3301)
    at createComponent (vue.runtime.esm.js?2b0e:5972)

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'poster' of undefined"

found in

---> <DetailPage> at src/components/DetailPage.vue
       <App> at src/App.vue... (1 recursive calls)
         <Root>

и много других подобных предупреждений.

Позже я предполагаю, что это может быть связано с тем, что параметр id должен быть загружен до того, как другие атрибуты получат к нему доступ, поэтому я добавляю его в созданный в DetailPage.vue, например: 

`created: function() {
    this.film = films[this.$route.params.id];
    this.loadImg(
      response => {
        this.imgSrc = response.src;
      },
      reject => {
        console.log("图片加载失败");
        this.imgSrc = this.imgErrSrc;
      }
    );
  },

Теперь некоторая информация может быть загружена, но другая не может, например, постер и продолжительность. Предупреждения включают в себя: 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "TypeError: Cannot read property 'duration' of undefined"

found in

---> <DetailPage> at src/components/DetailPage.vue
       <App> at src/App.vue... (1 recursive calls)
         <Root>

TypeError: Cannot read property 'duration' of undefined
    at VueComponent.data (DetailPage.vue?b507:34)
    at getData (vue.runtime.esm.js?2b0e:4742)
    at initData (vue.runtime.esm.js?2b0e:4699)
    at initState (vue.runtime.esm.js?2b0e:4636)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5000)
    at new VueComponent (vue.runtime.esm.js?2b0e:5148)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
    at init (vue.runtime.esm.js?2b0e:3114)
    at merged (vue.runtime.esm.js?2b0e:3301)
    at createComponent (vue.runtime.esm.js?2b0e:5972)

Итак, почему это так и как я могу получитьвся информация отображается?

Извиняюсь, если мой плохой английский беспокоит вас,и заранее спасибо!

1 Ответ

0 голосов
/ 26 апреля 2019

Ваша проблема вызвана функцией data() в компоненте DetailPage. 

  data: function() {
    return {
      id_: this.$route.params.id,
      film: films[id_],
      imgSrc: "",
      imgErrSrc: errorImg,
      duration: "片长：" + this.film.duration + "分钟",
      summary: "简介：" + this.film.summary
    };
  },

Есть несколько вопросов:

film: films[id_] не будет работать - id_ нигде не определено, поэтому film prop также будет неопределенным.

duration: "片长：" + this.film.duration + "分钟" - вы не можете получить доступ к другим data реквизитам, используя this.

Вы должны сделать так, чтобы ваша data() функция содержала данные по умолчанию / пусто / заполнитель: 

  data: function() {
    return {
      id_: this.$route.params.id, // this is fine - you can access $route because it's global
      film: {}, // empty object or some object type containing placeholder props
      imgSrc: "",
      imgErrSrc: errorImg,
      duration: "",
      summary: ""
    };
  },

Затем в ваш created или mounted крючок загрузите его: 

  created: function() {
    this.film = films[this.$route.params.id];
    this.duration = "片长：" + this.film.duration + "分钟";
    this.summary = "简介：" + this.film.summary;
    this.loadImg(
      response => {
        this.imgSrc = response.src;
      },
      reject => {
        console.log("图片加载失败");
        this.imgSrc = this.imgErrSrc;
      }
    );
  },
...