0

Переход осуществляется с этого компонента

   <template>
    <div>
        
           <template v-for="(item, index) in num">
                <router-link :to = "{name: 'film', params: {id: index}}" class="line">    
                        <div>
                        <div class="card">
                            <div >
                                <img :src="database[index].src" alt="" class="img-part">
                            </div>
                            <div class="name-year-part">
                                <p class="text">{{database[index].name}}</p>
                                <p class="text-muted">{{database[index].year}}</p>
                            </div>
                        </div>
                        </div>
                    </router-link>        
                </template>
            <router-view></router-view>
    </div>

</template>

<script>
import database from './database.js';

let num;

for(let i = 0; i <= database.length; i++){
    num = i;
}

export default {
  data() {
    return {
      database: database,
      num: Number(num)
    }
  },
}



</script>
<style lang="">
  body{
    margin-left: 20%;
    margin-top: 10%;
  }
  .line{
    display: inline-block;
  }
  a{
    text-decoration: none;
    color: black
  }
  .card{
        width: 300px;
        height: 500px;
        border: 1px solid lightgray;
        padding: 5px;
    }
     .img-part{
        height: 400px;
        width: 100%;
    }
    .name-year-part{
        text-align: center;
    }
    .text{
        font-weight: bold;
    }
    .text-muted{
        opacity: 0.5;
    }
</style> 

В этот

<template>
    <div>
        <div v-if = "film">
            <h2 class="film">{{film.name}} ({{film.year}})</h2>
            <br>
            <br>
            <img :src="film.src" alt="" class="img">
            <p>{{film.description}}</p>
        </div>
    </div>
</template>

<script>

import database from './database.js';
let num;
for(let i = 0; i <= database.length; i++){
    num = i;
}
export default {
  data() {
    return {
      database: database,
      num: Number(num),
      film: null
    }
  },
  
  created: function() {
      let filmId = this.$route.params.id;
      this.film = this.database[filmId];
    }
  }
</script>

<style lang="" scoped>
    .img{
        width: 200px;
        height: 300px;
        float: left;
    }
    
</style>
При переходе старый компонент остаётся, а новый просто добавляется. Как при переходе мне уничтожить старый компонент?

2
  • Переходы осуществляются внутри тэга <router-view></router-view>. Все, что за пределами этого тяга- остается
    – Dmytro
    20 апр 2019 в 18:40
  • Тогда каким образом мне ''правильно' организовать переход?
    – koval96
    20 апр 2019 в 18:44

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.