Javascript 是否可以通过vue中的另一个功能模拟点击路由器链接元素

是否有一种方法可以在vue中模拟路由器链接元素上的单击事件。我把router link元素放在我的旋转木马中，因为在那里我可以访问电影对象，我需要它来传递router link参数，但在那里很难正确设置它的样式，所以我将使用旋转木马外部的按钮，当点击时触发一个函数来模拟点击路由器链接。最后，我将隐藏路由器链接元素，只使用我传递单击事件的按钮来执行模拟。我是vue的新手，所以请宽恕我：）

这是密码

 <v-carousel-item
        style="cursor:pointer"
        v-for="movie in popularMovies"
        :key="movie.title"
        :src="apiUrl + movie.poster_path"
      >
        <div class="carousel-title">
          <p>{{movie.title}}</p>
        </div>
        <router-link 
        :to="{ name: 'MovieDetails', params: { id: movie.id }}">
        VIEW MORE</router-link>
      </v-carousel-item>
    </v-carousel>
    <div style="text-align:center;">
      <v-btn @click="loadRouterLink">VIEW DETAILS</v-btn>
    </div>

就这样

loadRouterLink (movieId) {
    this.$router.push({ name: 'MovieDetails', params: { id: movieId }})
}

请注意，我在

loadRouterLink

函数中添加了一个movieId参数。这是因为

movieid

是基于v-for的，因此函数应该知道id是什么（基于参数-当然可以用其他方式）

在html中，您应该将正确的id作为参数发送到此函数

或者你可以用另一种方式（同样的想法）

---

source-

我尝试了这一点，现在在控制台中出现了错误“呈现中的错误：”TypeError:无法读取未定义的属性“title”，听起来您的电影阵列有问题，它与

loadRouterFunction

无关。你确定每部电影都有片名属性吗。请注意，您将其设置为v-for中的键。甚至把它作为

旋转木马标题

，所以它必须存在于阵列中的每个项目上。我认为问题是我不能访问旋转木马之外的电影对象，以便将id作为参数传递给组件方法当然你不能。它仅在v-FOR范围内可用，因为您有旋转木马项目和一个显示查看详细信息的按钮。按钮应该如何知道要转到哪个元素。您可以通过添加数据属性（如movieId）来完成此操作，并在每个

转盘项目中单击事件将属性设置为movieId。顺便说一句，通过这种方式，
loadRouterFunction
可以从那里读取它，您不需要将它作为参数发送
loadRouterLink (movieId) {
    this.$router.push({ name: 'MovieDetails', params: { id: movieId }})
}

<v-carousel-item @click="movieId=movie.id"
        style="cursor:pointer"
        v-for="movie in popularMovies"
        :key="movie.title"
        :src="apiUrl + movie.poster_path"
      >
        <div class="carousel-title">
          <p>{{movie.title}}</p>
        </div>
        <router-link 
        :to="{ name: 'MovieDetails', params: { id: movie.id }}">
        VIEW MORE</router-link>
      </v-carousel-item>
    </v-carousel>
    <div style="text-align:center;">
      <v-btn @click="loadRouterLink">VIEW DETAILS</v-btn>
    </div>

{
    data(){
        return{movieId:0}
    },
    methods:{
         ...mapActions(["fetchPopularMovies"]),
    loadRouterLink () {
    this.$router.push({ name: 'MovieDetails', params: { id: this.movieId }})
    }
    }
}