Vue.js 라우터가 RouteUpdate 전에 호출하지 않음(typescript)

Vue.js 라우터가 RouteUpdate 전에 호출하지 않음(typescript)

같은 루트에 대한 라우터 링크를 포함하고 있지만 다른 파라미터를 가진 컴포넌트가 있습니다.이러한 링크로 이동하면 URL은 변경되지만 데이터는 업데이트되지 않습니다.Route Update가 정의되어 있지만 호출되지 않습니다.

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
@Component
export default class AccountComponent extends Vue {
    address: string;
    account: Account;

    data() {
        return {
            account: null
        }
    }

    beforeRouteUpdate(to: any, from: any, next: any) {
        console.log('beforeRouteUpdate for ' + to.params.address);
        next();
    }

    mounted() {
        this.address = this.$route.params.address;
        this.loadData();
    }

    loadData() {
        console.log('Fetching data for ' + this.address);
        fetch('api/Account/Get?address=' + this.address)
            .then(response => response.json() as Promise<Account>)
            .then(data => {
                this.account = data;
            });
    }
}

질문이 있은 지 2년 만에 이 문제에 부딪혔지만 Simsteve7의 답변 외에 코드를 자체 파일에 넣어야 합니다.

// router/componentHooks.ts

import Component from "vue-class-component";

// Register the router hooks with their names
Component.registerHooks([
    "beforeRouteEnter",
    "beforeRouteLeave",
    "beforeRouteUpdate"
]);

그런 다음 main.ts를 Import하는 첫 번째 행으로 넘어갑니다.

import './router/componentHooks' // <-- Needs to be first
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

내가 방금 컴포넌트 호출을 설치해서 이 상황을 헤쳐나가기 전에 말이야.$route.params.그 대신 탑재되어 있는 모든 것을 자체 기능에 넣고 탑재되어 있는 것으로부터 호출했습니다.$route.params 및 RouteUpdate의 to.params 이전.예를 들어 다음과 같습니다.

  async mounted() {
        await this.loadPage(this.$route.params.id)
  }

  async beforeRouteUpdate(to, from, next) {
        console.log(`beforeRouteUpdate ${to.params.id}`)
        await this.loadPage(to.params.id)
    next()
  }

  async loadPage(id) {
    //...
  }

출처 : https://class-component.vuejs.org/guide/additional-hooks.html

아직 답변이 없으시기 때문에 가능한 이슈를 올리겠습니다.

반드시 등록해 주세요.beforeRouteUpdateVue를 초기화하기 전에 후크합니다.

Component.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave',
    'beforeRouteUpdate',
]);

new Vue({...});

> 를 사용하여 여기에 도달한 경우vue-class-component@^8.0.0-rc.1사용할 수 있는 코드는 다음과 같습니다.

import { Vue } from "vue-class-component";

Vue.registerHooks([
    "beforeRouteEnter",
    "beforeRouteLeave",
    "beforeRouteUpdate"
]);

언급URL : https://stackoverflow.com/questions/49235964/vue-js-router-not-calling-beforerouteupdate-typescript