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

Question

我无法使用 v-for 指令正确渲染路由器链接。

我想要的是，我希望侧边菜单有一个链接，将用户引导到 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网站根目录下的页面。