无法使用router-link和v-for在vuejs上动态绑定路径

Question

我在使用v-for指令正确渲染router-link时遇到问题。

我想要的是，我希望侧面菜单具有一个链接，该链接可将用户引导到url与侧面菜单元素的名称相对应的页面。
因此，如果元素为“ 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页面。