2017-12-27 82 views
0

我無法正確使用v-for指令呈現router-link。無法在vuejs上使用路由器鏈接和v-v動態綁定路徑

我想要的是,我想要的側面菜單有一個鏈接,引導用戶到網頁對應的側邊菜單元素的名稱。
所以,如果元素是'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'} 
    ] 
})} 

上述結果是:

+0

你可以用這個創建一個jsfiddle嗎?這是很難明白髮生了什麼事... –

+0

這個問題沒有足夠的信息能夠幫助。請提供完整的組件代碼和您的路由器代碼。 – webnoob

回答

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

斜槓是確保你去/HOME頁面網站的根目錄下。