웹 프론트엔드 View.js vue에서 페이지 A에서 B 페이지로 이동하는 방법

vue에서 페이지 A에서 B 페이지로 이동하는 방법

Sep 11, 2021 am 11:29 AM
vue

Vue는 페이지 A에서 페이지 B로 이동하는 방법을 구현합니다. 1. ""과 같은 코드로 페이지 A를 설정합니다. 2. 리디렉션된 URL을 $router에 추가합니다. 3. "created("와 같은 코드로 페이지 B를 설정합니다. ) {...}"; 4. js 콘텐츠를 수정하면 됩니다.

vue에서 페이지 A에서 B 페이지로 이동하는 방법

이 기사의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

페이지 A에서 페이지 B로 Vue를 어떻게 이동할 수 있나요?

vue는 인터페이스 A에서 인터페이스 B로 점프하고 매개변수를 전달합니다.

최근에 인터페이스 A에서 버튼을 클릭하여 인터페이스 B로 점프하고 매개변수를 전달해야 하는 요구 사항이 발생했습니다.

요구 사항을 다음과 같이 구현했습니다.

페이지:

<el-button size="mini"
                   type="success"
                   @click="add"
                   icon="el-icon-plus"
                   round
                   plain>{{$t(&#39;common.add&#39;)}}</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="edit"
                   icon="el-icon-edit"
                   plain
                   round>{{ $t(&#39;common.edit&#39;) }}</el-button>
로그인 후 복사

클릭 이벤트:

add() {
      this.lockTaskStatus = &#39;new&#39;
      this.toLockTaskManagePage()},edit() {
      this.lockTaskStatus = &#39;edit&#39;
      this.toLockTaskManagePage()},toLockTaskManagePage() {
      this.$router.push({
        path: &#39;/taskLockManage&#39;,
        name: &#39;TaskLockManage&#39;,
        params: {
          status: this.lockTaskStatus        }
      })}
로그인 후 복사

리디렉션된 URL이 $router에 추가됩니다.

경로에서 URL 앞에 /를 붙이면 루트 디렉터리에 있다는 뜻입니다. 추가하지 않으면 하위 경로라는 의미입니다.

경로 + 매개변수 조합을 통해 매개변수를 전달합니다.

B 페이지:

created() {
    this.getParams()
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    $route: &#39;getParams&#39;
  },
  methods: {
    getParams() {
      // 取到路由带过来的参数
      const res = this.$route.params.status
      console.log(&#39;getParams&#39;, res)
    }}
로그인 후 복사

마지막으로 router/index.js에 등록해야 합니다:

{
    path: &#39;/taskLockManage&#39;,
    component: Layout,
    redirect: &#39;/taskManage/index&#39;,
    hidden: true,
    children: [
      {
        path: &#39;taskLockManage&#39;,
        component: () => import(&#39;@/views/taskManage/taskLockManage&#39;),
        name: &#39;TaskLockManage&#39;,
        meta: { title: &#39;taskLockManage&#39;, icon: &#39;user&#39;, noCache: true }
      }
    ]}
로그인 후 복사

이 방법으로 점프를 달성할 수 있습니다. (PS: 이것은 지금까지 발견된 더 나은 방법입니다. 누군가 더 나은 지침을 제공할 수 있기를 바랍니다.)

관련 권장 사항: "vue.js Tutorial"

위 내용은 vue에서 페이지 A에서 B 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 echart를 사용하는 방법 vue에서 echart를 사용하는 방법 May 09, 2024 pm 04:24 PM

vue에서 echart를 사용하는 방법

vue에서 내보내기 기본값의 역할 vue에서 내보내기 기본값의 역할 May 09, 2024 pm 06:48 PM

vue에서 내보내기 기본값의 역할

Vue에서 지도 기능을 사용하는 방법 Vue에서 지도 기능을 사용하는 방법 May 09, 2024 pm 06:54 PM

Vue에서 지도 기능을 사용하는 방법

vue에서 이벤트와 $event의 차이점 vue에서 이벤트와 $event의 차이점 May 08, 2024 pm 04:42 PM

vue에서 이벤트와 $event의 차이점

vue에서 onmounted의 역할 vue에서 onmounted의 역할 May 09, 2024 pm 02:51 PM

vue에서 onmounted의 역할

vue에서 내보내기와 내보내기 기본값의 차이점 vue에서 내보내기와 내보내기 기본값의 차이점 May 08, 2024 pm 05:27 PM

vue에서 내보내기와 내보내기 기본값의 차이점

Vue의 후크는 무엇입니까 Vue의 후크는 무엇입니까 May 09, 2024 pm 06:33 PM

Vue의 후크는 무엇입니까

vue에 마운트된 것은 반응의 수명 주기에 해당합니다. vue에 마운트된 것은 반응의 수명 주기에 해당합니다. May 09, 2024 pm 01:42 PM

vue에 마운트된 것은 반응의 수명 주기에 해당합니다.

See all articles