은 router-link 및 v-for를 사용하여 vuejs에서 경로를 동적으로 바인드 할 수 없습니다.

Question

v-for 지시어로 router-link를 올바르게 렌더링하는 데 문제가 있습니다.

내가 원하는 것은 사이드 메뉴에 사용자가 사이드 메뉴 요소의 이름에 해당하는 페이지로 연결되는 링크를 갖기를 원합니다.
요소가 'HOME'인 경우
myproject.com/HOME으로 연결됩니다.
그러나 든 그것의 렌더링 myproject.com/Campaign/Campaign/Campaign/HOME

된다.

저는 무엇이 계속되고 있는지 전혀 모르며 도움을 구하고 있습니다.

<div id="side"> 
    <v-navigation-drawer 
    fixed 
    clipped 
    app 
    v-model="drawer" 
    > 
     <v-list dense> 
      <template v-for="x in item"> 
      <div id="no-child" v-if="!x.children"> 
       <router-link :to="{ path: x.title }"> 
       <v-list-tile> 
        <v-list-tile-content> 
        <v-list-tile-title>{{x.title}}</v-list-tile-title> 
        </v-list-tile-content> 
       </v-list-tile> 
       </router-link> 
       <v-divider></v-divider> 
      </div> 
      <div id="with-child" v-else-if="x.children"> 
       <v-list-gruop> 
        <v-list-tile> 
        <v-list-tile-content> 
         <v-list-tile-title>{{x.title}}</v-list-tile-title> 
        </v-list-tile-content> 
        </v-list-tile> 
        <v-list-tile> 
        <v-list-tile-content v-for="z in x.children"> 
         <router-link :to="{ path: x.title}"> 
         <v-list-tile-title>{{ z.text }}</v-list-tile-title> 
         </router-link> 
        </v-list-tile-content> 
        </v-list-tile> 
       </v-list-gruop> 
       <v-divider></v-divider> 
      </div> 
      </template> 
     </v-list> 
    </v-navigation-drawer> 

export default { 
data:() => ({ 
    drawer: null, 
    item: [ 
    {title: 'HOME'}, 
    {title: 'Campaign', 
     children: [ 
     {text: 'Start'}, 
     {text: 'Campaigns'}, 
     {text: 'Previous'} 
     ] 
    }, 
    {title: 'Payment', 
     children: [ 
     {text: 'Pending'}, 
     {text: 'Completed'} 
     ] 
    }, 
    {title: 'Profile'}, 
    {title: 'Logout'} 
    ] 
})} 

위의 결과

은 다음과 같습니다

Answer 1

<router-link :to="{ path: '/' + x.title }"> 

슬래시는 당신이 당신의 웹 사이트의 루트 디렉토리 아래의 /HOME 페이지로 이동 있는지 확인하는 것입니다.