[Vue 3] Vue RouterLink 사용하기

 

사전 준비

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import QuizView from '@/views/QuizView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/quiz',
      name: 'quiz',
      component: QuizView
    }
  ]
})

export default router

index.js에 컴포넌트를 등록하고 name으로 뷰에서 사용할 이름을 설정하고 경로를 설정해준다.

 

사용하려는 뷰에서의 준비

import { RouterLink, RouterView } from 'vue-router'
import HomeView from './views/HomeView.vue'
import QuizVuew from './views/QuizView.vue'

이렇게 선언을 해주어야한다.

 

 <div class="quiz-bottom">
      <RouterLink :to="{name:'home'}">Home  </RouterLink>
      <RouterLink :to="{name:'quiz'}">Quiz</RouterLink>
     </div>
    </div>
    <RouterView/>

 

<RouterLink :to="{name : '할당한 이름'}"> 으로 등록한 것들을 실행하면

<RouterView> 위치에 출력된다.

 

 

동적 경로 할당하기

준비물

index.js

 {
      path: '/students/:name',
      name: 'studentss',
      component: StudentDetailView
    },
    {
      path: '/students/',
      name: 'students',
      component: StudentViews
    },

 

동적할당 뷰

import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

 

사용시

 

보낼 때

<div v-for="student in arr">
<RouterLink :to="{name: 'students', params:{name: student.name}}" >{{ student.name }} 학생 정보 보기</RouterLink>
</div>

 

받을 때

const route = useRoute()
const studentName = ref(route.params.name)

 

사용할 수 있다.