hoony's web study

728x90
반응형

Pixabay로부터 입수된 Diggity Marketing님의 이미지 입니다.

처음에 하는 언어는 항상 이렇게 좌충우돌 하는것 같습니다.
어제는 안 되던것이 오늘은 또 이렇게 시원하게 해결이 되어서 포스팅을 올립니다.
인터넷을 찾아봐도 drawer 에 링크를 거는것이 잘 안된다고 해서 포스팅된 글들이 많이 있습니다.
하지만 저한테도 맞는 것은 없더라구요. 
일단 구현된것은 잊지 않기 위해서 포스팅을 합니다.

중요한 부분은 
:to="item.path" 이 부분입니다.
정말 생각지도 않게 해결이 되어버렸어요. 
아래는 적용된 소스 코드입니다.

반응형
<v-list-item  
                  v-for="item in items"
                  :key="item.title"
                  link
                  :to="item.path"
               >
                 <v-list-item-icon>
                    <v-icon>{{item.icon}}</v-icon>
                 </v-list-item-icon>
                 <v-list-item-title>{{item.title}}</v-list-item-title>
               </v-list-item>


링크에 대한 정의는 소스의 하단에 제가 명시를 했는데 이것도 포스팅해드릴께요. 
이 부분에 대해서는 단지 예시이니 상황에 맞게 커스텀해서 사용하시면 될것같습니다. 

items: [
        {
          title:'Home',
          icon: 'mdi-view-dashboard',
          path:'/'
        },
        {
          title:'품목관리',
          icon: 'mdi-image',
          path:'/codeList'
        },
        {
          title:'발주관리',
          icon: 'mdi-image',
          path:'/'
        },
        {
          title:'Login',
          icon: 'mdi-account',
          path:'/login'
        },
      ],

혹시라도 도움되셨거나 틀린 부분 있으시면 지적 부탁드립니다. 

728x90

'개발관련 > VUE JS' 카테고리의 다른 글

vuetify Date picker  (0) 2022.01.18
vuejs enter key event 처리  (0) 2022.01.17
vuetify drawer menu 디자인시 참고 사이트  (0) 2022.01.14
vuetify pagination 예제  (0) 2022.01.11
vuetify v-alert 기본 사용법  (0) 2022.01.11

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading