vue -маршрутизатор не работает на мобильных устройствах - PullRequest
Новая
       66

vue -маршрутизатор не работает на мобильных устройствах

0 голосов
/ 01 августа 2020

Я добавил кнопку vuetify для изменения URL-адреса, но она работает только с компьютером, а не с мобильным устройством, и когда я использую devtool мобильного размера в Google chrome, она больше не работает .. и ее моя кнопка 

<v-card
 class="mx-3 my-12 d-flex"
 max-width="800"
 max-heigh="230"
 v-for="(item, index) in films"
 :key="index"
>
 <v-card-text class="d-flex py-2">
  <v-chip-group
     v-for="(zhaner, index) in item.zhaner"
     :key="index"
     class="d-flex">
   <v-chip>{{ zhaner }}</v-chip>
  </v-chip-group>
  <v-spacer></v-spacer>
  <v-btn rounded default :to="'/film/' + item.name">
   See More...
  </v-btn>
 </v-card-text>
</v-card>

Я добавил еще одну кнопку для изменения темы, и она сработала, только эта не работает, и когда я go перехожу к ссылке, написав индивидуальный URL-адрес, он не работает и не показывает мне ничего (на мобильном телефоне) .. и его мой файл маршрутизатора 

  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/film/:name",
    name: "FilmPage",
    component: FilmPage,
  }

И его тег скрипта для получения свойств и тега шаблона .. 

<template>
 <div>
  {{ getPage }}
  <v-container>
    <Header :filmInfo="film" />
    <div class="d-flex justify-space-between flex-wrap">
     <Movies :filmInfo="film" />
     <Infos :filmInfo="film" />
    </div>
  <v-container>
 </div>
</template>

<script>
import Header from "../components/Film/header";
import Movies from "../components/Film/movie";
import Infos from "../components/Film/infos";

export default {
  data() {
    return {
      film: null,
      data: "",
    };
  },
  computed: {
    getPage() {
      this.data = this.$route.params.name;
      this.film = this.$store.state.films.find((i) => i.name === this.data);
    },
  },
  mounted() {
    document.title = "Film";
  },
  components: {
    Header,
    Movies,
    Infos,
  },
};
</script>
...