[vue] router로 데이터 보내기(params, query)

 

router를 활용하여 다른 페이지로 이동하면서 데이터를 보내는 방법이 있는데 배가 아파서 정리해보았음.

 

1. 동적으로 보내기

// 기본
router.push('/user')

// name으로 보내기 [2]
router.push({
  name: 'user'
});

// params와 함께 보내기 [3]
router.push({
  name: 'user',
  params: {
    userNo: 1
  }
})

특히 [2]번과 [3]번은 라우터에 아래와 같이 별도로 name을 정해줘야한다.

 

{
  path: "/user",
  name: "user",
  component:() => import("@/views/user/user.vue")
}

 

여기서 주의할것은 [3]의 경우(params이랑 보낸거) 이런 경고창이 뜨게된다.

 

연결된 링크는 이곳

https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

GitHub - vuejs/router: 🚦 The official router for Vue.js

 

아무튼 params로 보내려면 url에 별도로 표시를 해줘야 저런 경고가 안뜸.

{
  path: "/user/:userNo", // :userNo 이부분을 꼭 추가해줘야함
  name: "user",
  component:() => import("@/views/user/user.vue"),
  meta: { requiresAuth: true }
}

이렇게 path에 땡땡하고 params에서 보내는 값을 쓰라는 의미임. 결론적으로 저렇게 쓰면 나중에 이동하는 페이지는 /user/1로 이동하게 되면서 경고창은 사라짐.

 

 

2. query 예시

얘는 다를거없고 그냥 params대신 query로 보내면 되는건데, path에 땡땡 쳐가면서 안써도 되지만 문제는 url에 /user/?=1 이렇게 뜸.

router.push({
  name: 'user',
  query: {
    userNo: 1
  }
})

 

 

3. 받아서 쓰는 법

params의 경우 props에서 받아씀

setup(props) {
  const userNo = props.userNo;
}

 

query의 경우 useRoute로 받아씀

import { useRoute } from "vue-router";

setup() {
  const userNo = useRoute().query.userNo;
}

 

 

4. 그냥 데이터만 주는 방법

url에 쓸것도 아니고 그냥 특정 데이터를 전달해야한다면

 

state로 주고 (대신 반응형 데이터 자체를 보내는건 안된다고 함)

router.push({
  name: 'user',
  state: {
    userNo: 1
  }
})

history(내장api)로 받아 쓰면 되는데, 이게 다른 url을 직접 입력해서 현재 페이지를 벗어났다가, 다시 현재 url를 직접 입력하는 식으로 접근하면 state에 저장한 데이터가 사라짐(다른 url로 갔다가 뒤로가기하는 경우는 괜찮음). 그래서 이런 경우도 대비해서 state 없을 경우 뭐 메인페이지로 보내버린다거나 하는중

setup() {
  const userNo = history.state.userNo;
}