vue composition api에서 라우터를 사용하는 방법?

vue composition api에서 라우터를 사용하는 방법?

나는 vue에서 경로를 정의했다.

/users/:userId

UserComponent를 가리키는 항목:

<template>
 <div>{{username}}</div>
</template>

그리고 나는 사용한다.computed로부터@vue/composition-api자료를 얻기 위해서.

문제는 노선이 다른 노선으로 바뀔 때 입니다.userId다른 사용자로 이동하여 html 템플릿의 사용자가 내가 예상한 대로 변경되지 않음.또한 사용자가 목록에 없을 때는 리디렉션되지 않는다.

그래서 내가 그걸 고치기 위해 할 수 있는 게 뭐야?

여기 내 코드가 있다:

<template>
  <div>{{username}}</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, getCurrentInstance } from '@vue/composition-api';

export const useUsername = ({ user }) => {
  return { username: user.name };
};

export default defineComponent({
  setup(props, { root }) {
    const vm = getCurrentInstance();

    const userToLoad = computed(() => root.$route.params.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, name: 'user2' },
    ];

    const user = listOfUsers.find((u) => u.userId === +userToLoad.value);
    if (!user) {
      return root.$router.push('/404');
    }

    const { username } = useUsername({ user });

    return { username };
  },
});

</script>

그냥 이렇게 하면 된다.

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    // Now you can access params like:
    console.log(route.params.id);
  }
};

매개변수를 구성요소에 소품으로 전달할 수 있다.소품은 기본적으로 반응한다.

경로 구성은 다음과 같이 보일 수 있다.

      {
        path: '/users/:userId',
        name: Users,
        component: YourComponent
      },

그런 다음 구성 요소에 있는 소품을watchEffect()

<template>
  <div>{{username}}</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, getCurrentInstance, watchEffect } from '@vue/composition-api';

export const useUsername = ({ user }) => {
  return { username: user.name };
};

export default defineComponent({
  props: {userId: {type: String, required: true },
  setup(props, { root }) {
    const vm = getCurrentInstance();
    const user = ref()

    const userToLoad = computed(() => props.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, name: 'user2' },
    ];

    watchEffect(() => user.value = listOfUsers.find((u) => u.userId === +userToLoad.value))
    
    if (!user) {
      return root.$router.push('/404');
    }

    const { username } = useUsername({ user });

    return { username };
  },
});

</script>

watchEffect()정의될 때 그리고 사후 대응 의존성이 변경될 때 즉시 실행된다.

A도 같은 문제가 있었다.나는 vue 2와 @vue/composition-api를 사용한다.

내 결심:

생성됨: src/router/migrateRouterVue3.js

import { reactive } from '@vue/composition-api';
import router from './index';

const currentRoute = reactive({
  ...router.currentRoute,
});

router.beforeEach((to, from, next) => {
  Object.keys(to).forEach(key => {
    currentRoute[key] = to[key];
  });
  next();
});

// eslint-disable-next-line import/prefer-default-export
export function useRoute() {
  return currentRoute;
}

그 후 다음을 사용할 수 있다.

// import { useRoute } from 'vue-router';
import { useRoute } from '@/router/migrateRouterVue3';

---

해결 방법:

// replace:
// const userToLoad = computed(() => root.$route.params.userId);
// to:  
import { useRoute } from '@/router/migrateRouterVue3';
//...
const route = useRoute();
const userToLoad = computed(() => route.params.userId);

vue-package 사이트의 설명서와 같이

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
 if (!user) {
      
router.push({
        name: '404',
        query: {
          ...route.query,
        },
      })
    }
    }
  },
}

function useRoute() {
  const vm = getCurrentInstance()
  if (!vm) throw new Error('must be called in setup')

  return vm.proxy.$route
}

https://github.com/vuejs/composition-api/issues/630

다음useRoute갈고리가 통할 것이다.route실행 가능하도록 반응함:

const route = useRoute();
const fooId = computed(()=>route.params.fooId);

let currentRoute = null;
export const useRoute = () => {
  const self = getCurrentInstance(); 
  const router = self.proxy.$router;
  if (!currentRoute) {
    const route = { ...self.proxy.$route };
    const routeRef = shallowRef(route);
    const computedRoute = {};
    for (const key of Object.keys(routeRef.value)) {
      computedRoute[key] = computed(() => routeRef.value[key]);
    }
    router.afterEach((to) => {
      routeRef.value = to;
    });
    currentRoute = reactive(computedRoute);
  }
  return currentRoute;
};

이 코드 추가: watchEffect(() => userToLoad;

참조URL: https://stackoverflow.com/questions/60755676/how-to-use-router-in-vue-composition-api