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

Question

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

我想要的是，我希望侧边菜单有一个 link 引导用户到 url 与侧边菜单元素的名称相对应的页面。
所以，如果元素是 'HOME'，它应该导致
我的项目.com/HOME.
然而，不知何故，它变成了
我的项目.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页面。

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

cannot bind path dynamically on vuejs with router-link and v-for

javascript

vue.js

routerlink

v-for