@adizh

Как правильно организовать роуты на Vue 2?

61fa7c2308dea022894699.pngНужно организовать роут на vue2, при клике на определенный элемент, должно выходить : url/name.
Но страницу приходится каждый раз обновлять, без этого не показываются другие элементы.
Router
{ path: "/pokemon/:name", name:'name', component: pokemonDetail,props:true}

EachItem:
<template>
    <div>
   <div>


        <p> 
     name: {{item.name}} </p>
   order:{{item.order}}
   weight:{{item.weight}}
   </div>
      <router-link :to='{name:"pokemon"}'>
        back
      </router-link>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    methods:{
       
    },
    data(){
        return{ 
         name:this.$route.params.name,
         item:[]
        }
    },
    created(){
        axios.get(`https://pokeapi.co/api/v2/pokemon/${this.name}`)
        .then((res)=>{
         this.item=res.data
        })
    },
}
</script>
<style>
</style>

Когда перехожу назад к списку покемонов и нажимаю на другой персонаж, то он не обновляется, в роутах имя менятся, но сами данные остаются прежними
Link:
<router-link  :to="{name:'name',params:{name:pokemon.name}}">Info</router-link>

когда выбираю в первый раз , все работает:

61fa7c35b412e394582053.png

Но во второй раз, данные остаются прежними
61fa7c5d928e3551464038.png
  • Вопрос задан
  • 97 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы