Vue 2 Spa 라우팅, 뒤로 버튼

Disclaimer: 
Using `Vue 2` with `@vue/composition-api`

사용자 정의 뒤로 버튼을 만드는 방법을 방황한 적이 있습니까?

사소해 보일 수 있죠?

Just `router.go(-1);`

하지만 세부 정보 보기에서 목록 페이지로 돌아가는 뒤로 버튼이 있는 이동 경로처럼 작동하려면 어떻게 해야 할까요?

충분히 간단해 보입니다.

router.push({name:'SomeList'})

좋습니다. 하지만 해당 목록에 쿼리/검색/페이지 매김이 있으면 어떻게 될까요?

이를 위해서는 한 곳 또는 다른 곳에서 일부 정보를 추적하기 시작해야 합니다.

vue용 플러그인이 있습니다.
Vuex Router Sync

그러나 Vuex를 사용하지 않거나 가능한 경우 종속성을 피하려고 하는 경우 간단한 해결책이 있습니다.

해결책:

쿼리를 현재 경로에 동기화

먼저 vue 라우터에 쿼리 매개변수를 동기화해야 합니다.

import { removeNullProperties } from './useUtilities.js';
import { useRouter } from './useRouter.js';

// composable function
export const syncQuery = (query) => {
  // injected vue router instance
  const router = useRouter();

  const updateQueryParams = () => {
    const url = new URL(window.location);
    // reseting the search as window.location includes the current query params as well
    url.search = '';

    // removing any null/empty properties so that the url stays a clean as possible
    Object.keys(removeNullProperties(query)).forEach((key) => {
      url.searchParams.set(key, query[key]);
    });

    const { pathname, search } = url;
    const newPath = `${pathname}${search}`;
    const currentPath = router.currentRoute.fullPath;

    // if the path changed let's update vue router
    if (newPath !== currentPath) {
      router.push(newPath);
    }
  };

  // watched to watch query for changes
  watch(
    () => query,
    () => {
      updateQueryParams();
    },
    { deep: true }
  );
};

vue 라우터 글로벌 리졸브 가드 사용

이제 몇 가지 메타 정보를 저장해야 합니다. vue 라우터를 사용할 때 두 가지 간단한 옵션이 있습니다. Global resolve guards beforeResolve 또는 beforeEach
이 예에서는 beforeResolve를 사용하겠습니다.

router.beforeResolve = (to, from, next) => {
  if (!to.meta) {
    to.meta = {};
  }

  to.meta.from = {
    name: from.name,
    params: from.params,
    query: from.query,
  };
}

이렇게 하면 from 경로로 다시 탐색하는 데 필요한 모든 것이 추가됩니다.

진정한 경로를 되찾을 수 있는 컴포저블

다음으로 맞춤 뒤로 버튼에 사용할 또 다른 구성 가능한 함수를 작성했습니다.

import { useRouter } from './useRouter.js';

export const useRouteBack = (route) => {
  const router = useRouter();

  const from = router.currentRoute.meta?.from;
  if (from && from.name === route.name) {
    return from;
  }
  return route;
};

다음과 같이 간단하게 사용할 수 있습니다.

<router-link :to="useRouteBack({name: 'SomeList'})>
back to list
</router-link>

그게 다야. 나는 모든 비트와 밥을 수집하는 데 꽤 많은 시간을 보냈지 만 이 솔루션은 최소한의 노력/코드와 관련된 솔루션처럼 보였습니다.

쿼리에서 목록 페이지 초기화

이것은 실제로 솔루션에 따라 다르지만 작업을 수행하는 데 가장 중요한 부분입니다.

본질적으로 router.query 매개변수를 사용하는 동안 목록 페이지를 초기화할 수 있는지 확인해야 합니다.

내가 한 것은 API에 대한 첫 번째 호출이 URL에서 제공된 초기 매개 변수와 일치하도록 목록 페이지에 라우터 쿼리 처리를 추가하는 것입니다.

이것은 각 페이지에 대한 매우 맞춤형 솔루션입니다.
객체로 쿼리를 v-모델링하는 복잡한 필터가 있는 페이지가 있을 수 있으므로 URL/api는 다음과 같은 간단한 데이터 구조만 필요합니다.

id: number|string
date: string
name: string

아직 모든 목록 페이지를 업데이트하는 중입니다.

멋진 기능/패턴으로 다듬을 수 있는 공통점을 찾으면 이 게시물을 업데이트하겠습니다.

이것이 도움이 되기를 바라며 코딩 모험에 행운을 빕니다!