Vue this.$router.push (매개 변수) 페이지 점프 작업 실현

많은 경우, 우리는 단추를 누르면 페이지를 뛰어넘기 전에 일련의 방법을 실행할 수 있으며, 이때this.$를 사용할 수 있다router.push (location) 는 URL을 수정하고 점프를 완성합니다.
push 뒤쪽은 객체일 수도 있고 문자열일 수도 있습니다.

//  
this.$router.push('/home/first')
//  
this.$router.push({ path: '/home/first' })
//  
this.$router.push({ name: 'home', params: { userId: wise }})

페이지를 건너뛰고 매개변수를 전달하는 방법:
1.Params
동적 루트도params를 전달하기 때문에this.$router.push () 방법에서path는params와 함께 사용할 수 없습니다. 그렇지 않으면params는 무효입니다.페이지를name로 지정해야 합니다.
루트를 통해 설정된name 속성에 접근
라우팅 프로파일에서 매개변수를 정의하려면 다음과 같이 하십시오.

/* router.js  */
import Vue from "vue";
import Router from "vue-router";
import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; // 
 
Vue.use(Router);
export default new Router({
 routes: [ /*   */
  {
    name: "MediaSecond",
    path: "/MediaSecond",
    component: MediaSecond
  },
 ]
}) 
/*  ，  ESlint   */

name를 통해 페이지를 가져와 params를 전달합니다.
this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} })
대상 페이지에서this.$를 통해route.params 가져오기 매개 변수:

if (this.$route.params.type == 2) {
  this.type = apis.getAtistDetails;
} else {
  this.type = apis.getMessageList;
}

2.Query
페이지는path/name와query를 통해 매개 변수를 전달합니다. 이 실례에서row는 특정한 줄의 표 데이터입니다.
this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } });
this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } });
대상 페이지에서this.$를 통해route.query 가져오기 매개 변수:
this.$route.query.type
추가 지식: vue this.$router.push('./map');돌릴 수 없는 문제

<template>
 <div style="text-align: center">
  <el-button type="primary" style="margin-top: 40vh" @click="onLogin"> </el-button>
 </div>
</template>
<script>
 export default {
  name: 'login',
  data () 
   return {
   }
  },
  methods: {
   onLogin:function () {
    this.$router.push('./map');
   }
  },
 }
</script>
<style scoped>
  
</style>

router에서 이렇게 도입됐어요.
import map from '@components/map'
이벤트 클릭 시 점프 불가
2. 해결 방법:
도입 방식을 바꾸다
import map=r=>require.ensure([],()=>(require('../components/map')),'map')
이렇게 정태를 통해 도입하면 문제없다!
위의 Vue this.$router.push(매개 변수) 구현 페이지 이동 작업은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.