【Vue.js】vue-router의 동적 URL로 파라미터가 바뀌었을 때, 라이프 사이클 훅은 불리지 않기 때문에 주의

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다.
제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다.

vue-router의 동적 URL에서 매개 변수가 변경되면 라이프 사이클 후크가 호출되지 않으므로주의

vue-router의 동적 URL이란?

다음과 같이 /users/ 에 계속되는 임의의 캐릭터 라인의 URL (URL 패스의 :id 의 부분이 그것)인 경우에, 그 때에 있는 컴퍼넌트를 표시하게 하는 설정의 일.

router.js

import Vue from 'vue';
import Router from 'vue-router';

import Home from './views/Home.vue';
import Users from './views/User.vue';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        { path: '/', component: Home },
        { path: '/users/:id', component: Users }
    ]
});

vue-router의 동적 URL에서 매개 변수가 변경되면 라이프 사이클 후크가 호출되지 않으므로주의

위의 동적 URL을 사용하면 Vue.js가 가진 라이프 사이클 후크가 호출되지 않습니다. 즉, Vue.js는 컴포넌트 그 자체(Vue 인스턴스)는 변화하고 있지 않다고 인식한다.

이 경우, URL이 전환 된 타이밍 (파라미터가 바뀌었을 때)에 어떠한 처리를 실행시키고 싶은 경우에는 watch를 사용한다.

동영상의 소스 코드는 이하.

vue.Users.vue

<template>
  <div>
    <h3>Users</h3>
    <router-link to="/users/1">ユーザ１</router-link>
    <router-link to="/users/2">ユーザ２</router-link>
    <hr />
    <h1>User No. {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log("created");
  },
  watch: {
    $route(to, from) {
      console.log("$routeのwatch");
      console.log(to);
      console.log(from);
    },
  },
};
</script>

소스 코드 전체는 이하.

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.

htps : // 코 m / 유타 카타 야마 - 23 / ms / 다베 fb59d16 아 83f1 아 1d4