vue3 v-router

💡 페이지 간의 이동을 하기 위해서는 vue-router 필요!

Vue-Router

router 설치

1. npm install vue-router 로 설치!
2. src > router > index.js 파일 생성
3. index.js안에 코드 작성하기

    import { createRouter, createWebHistory } from 'vue-router'
   
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/',
          name: 'Home',
          component: ''
        },
      ]
    })
   
    export default router
   

   path : 경로
   name : 해당 url 별명
   component : 이동할 컴포넌트

4. main.js 에 코드작성

    import router from './router'
   
    createApp(App).use(router).mount('#app')
   

5. app.vue 의 template 상단에 <router-view/> 작성
   • 상단에 컴포넌트 이동 버튼이 발생하게 된다.

⭐ @ 는 src 폴더를 가르치므로 절대경로를 가지게 된다
⭐ router-view 상단에 있는 것은 페이지 어디든 표시하게 된다.

router 링크 연결

a 태그 herf 에 router에 작성했던 path 를 작성한다.
이때 페이지 간에 이동하면 페이지를 리로딩함 ⇒ 애초에 vue는 처음 로딩시 모든 페이지 정보를 불러드린다.

그래서 <router-link> 를 지원한다.
이것은 herf 대신 to 를 사용하고 페이지간 이동시 재로딩이 없다.

vue-router 작동 원리

1. serve에 모든 구동 파일을 올려놓는다 (vue project 파일들)
2. 해당 주소로 요청시 ⇒ html, js 파일을 받아온다.
3. vue-router로 주소 이동시 중간에서 발생하는 새로고침을 가로챈

📎 새로고침이 없기에 빠르게 구동하지만, 처음에 모든 파일을 다운받기에 초기 구동속도가 느리다

❕ useRoute : 해당 라우터의 정보를 보내준다. useRouter : 라우터 이동시 사용

Todo 세부 페이지(적용)

router에서 id, nickname 같은 동적인 변수를 받을때는 /:id 으로 앞에 콜론을 붙여 작성한다.
해당 컴포넌트에 가서 useRoute().params 를 이용해 route에 정보를 받아온다.

해당 카드 선택시 이동!

1. 컴포넌트 클릭시 데이터의 id를 넘겨준다

2. 클릭 후 페이지를 넘어간다. (함수, 바인딩) 함수

    import { useRouter } from 'vue-router'
       
    const router = useRouter()
       
    const moveToPage = (todoId) => {
          //router.push('/todos/' + todoId)
       
    			router.push({
    			name: 'Todo',
    			params: {
    				id: todoId,
    				}
    			})
        }
   

   바인딩 <router-link :to="{name:'Home'}">Name</router-link> index.js에 적어놓은 name을 통해서도 router 이동이 가능하다!

   두가지 형식이 존재한다.

   위와같은 형식은 절대경로로 지정하는 것이기에 경로가 변경되면 일일이 변경해주어야한다. 그래서 name routing을 사용한다.

Router-Child

• 상단 컴포넌트에서 router-view 를 이용하여 사용
• router 속성에 children: [] 을 추가해 원래 작성했던 대로 경로를 추가함

⚠️ Component template requires a root element, rather than just text.
⇒ 태그 없이 사용해서 발생하는 에러