从vuex获取时，Vue路由器ID未定义

Question

我正在尝试从Vuex getter获取当前登录用户的ID，并将其传递到路由器链接中，但是即使我进行了console.log并显示了合法的用户ID，它还是以某种方式未定义。在我的模板中。在这里，我遍历了一系列保留路径名称的对象：

<v-list dark class="mt-5 userList" style="background: #515151;">
            <v-list-item
                    v-for="item in sideBar"
                    :key="item.title"
                    class="tile"
            >
                <router-link :to="item.route">
                    <span class="userIcon">
                        <v-list-item-icon>
                                <v-icon style="color: #FFA255">{{ item.icon }}</v-icon>
                        </v-list-item-icon>
                    </span>

                    <span class="userTitle">
                        <v-list-item-content>
                            <v-list-item-title style="color: #FFA255">
                                {{ item.title }}
                            </v-list-item-title>
                        </v-list-item-content>
                    </span>
                </router-link>
            </v-list-item>
        </v-list>

我认为这部分说明了我的脚本部分：

export default {
    data() {
        return {
            userParams: null,
            sideBar: [
                {title: 'User', icon: 'note', component: 'UserInfo', route: `/user/${this.userParams}`},
                {title: 'Rated albums', icon: 'note', component: 'Rated', route: `/user/${this.userParams}/rated`},
                {title: 'Owned', icon: 'favorite', component: 'Owned', route: `/user/${this.userParams}/owned`},
                {title: 'Settings', icon: 'settings', component: 'Settings', route: `/user/'${this.userParams}'/settings`},
            ],
        }
    },

    computed: {
        ...mapGetters([
            'getUserId'
        ])
    },


    created() {
        this.userParams = this.getUserId;
        console.log(this.userParams)
    },
}

我的router.js

{
        path: '/user/:id',
        component: User,
        children: [
            {
                path: '/',
                component: UserInfo,
                name: 'userInfo'
            },
            {
                path: 'owned',
                component: Owned,
                name: 'owned'
            },
            {
                path: 'rated',
                component: Rated,
                name: 'rated'
            },
            {
              path: 'settings',
              component: Settings,
                name: 'settings'
            }
        ],
        beforeEnter (to, from, next) {
            if(authStore.state.idToken) {
                next()
            } else {
                next('/signin')
            }
        }
    },

Answer 1

我也没有理由在getUserId中保留userParams的副本。

computed: {
  ...mapGetters([ 'getUserId' ]),
  sideBar () {
    const params = { id: this.getUserId } // this is reactive
    return [{
      title: 'User', 
      icon: 'note', 
      route: { name: 'userInfo', params }
    }, {
      title: 'Rated albums', 
      icon: 'note', 
      route: { name: 'rated', params }
    }, {
      title: 'Owned', 
      icon: 'favorite', 
      route: { name: 'owned', params }
    }, {
      title: 'Settings', 
      icon: 'settings', 
      route: { name: 'settings', params }
    }]
  }
},

目前，route字符串在创建组件时仅计算一次