javascript - 是否可以通过vue中的另一个函数模拟点击router-link元素

Question

有没有办法在vue中模拟router-link元素的点击事件。我将 router-link 元素放在我的 carousel 中，因为在那里我可以访问我需要传递 router-link 参数的电影对象，但是在那里很难正确设置它的样式，所以我将在 carousel 之外使用按钮和单击时触发一个功能来模拟单击路由器链接。最终我将隐藏 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>

和方法

methods: {
    ...mapActions(["fetchPopularMovies"]),
    loadRouterLink () {
      //do something here to simulate click on router-link element
    }
  },

Answer 1

就这样

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

请注意，我在 loadRouterLink 函数中添加了一个 movieId 参数。这是因为 movieid 是基于 v-for 的，所以函数应该知道什么是 id(基于参数 - 当然你可以用其他方式做到这一点)

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

或者你可以用另一种方式来做(同样的想法)

<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>

在js部分

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

来源 - https://router.vuejs.org/guide/essentials/navigation.html