vue带参数路由跳转并获取参数

方法一：router-link

<div class="view-item" >
    <router-link :to="{ name: 'detail', path: `/detail`, query: { id: 1 } }">
      <div class="img">
        <!-- <img :src="movie_info.src" alt="" /> -->
        <img :src="movie_info.coverimage" alt="" />
      </div>
      <div class="info">{{ movie_info.name }}</div></router-link
    >
  </div>

获取参数方法

 mounted() {
    console.log(this.$route.query.id)
  },

效果

 

方法二：this.$router.push()

<template>
  <div class="view-item" @click="itemClick(movie_info.vid)">
      <div class="img">
        <!-- <img :src="movie_info.src" alt="" /> -->
        <img :src="movie_info.coverimage" alt="" />
      </div>
      <div class="info">{{ movie_info.name }}</div>
   
  </div>
</template>

 itemClick(id) {
      console.log(id);
      this.$router.push({ name: "detail", path: `/detail`, query: { id: 1 } });
    },

获取参数和方法一一致