Javascript 框架7+；Vue+；Firebase：打开显示数据库动态信息的单独页面？

如何使用每个页面的动态url打开用户？ 我在Cordova项目中使用Framework7+Vue。 我已经定制了默认产品页面，该页面获取单个产品的id并显示数据，它通过在url中为每个用户生成唯一id（“uid”，根据firebase）来工作，因为它无法将其传递给我创建的user.vue页面，当我单击它时它不会打开。我到底错过了什么？我对JSON.stringify的东西了解不多

user.vue-单个数据页

<f7-page name="user">
        <f7-navbar :title="user.username" back-link="Back"></f7-navbar>
        <f7-block-title>About {{user.username}}</f7-block-title>
        <f7-block strong>
            {{user.email}}
        </f7-block>
</f7-page>

<script>
    export default {
        data: function () {
            var userId = this.$f7route.params.id;
            var currentUser;
            this.$f7.data.users.forEach(function (user) {
                if (user.user_id === userId) {
                    currentUser = user;
                }
            });
            return {
                user: currentUser,
            };
        }
    };
</script>

home.vue-返回数据的脚本位于顶部

data() {
return {
users: this.$f7.data.users, //the arrays had already been called/initialized at the app.vue
}

routes.js:

import UserPage from ‘…/pages/user.vue’;

{
path: ‘/user/:id/’,
component: UserPage,
}

我到底错过了什么

mounted() {

let viewUsers = this;
const usersRef = firebase.database().ref("users");
usersRef.on("value", snapshot => {
  let data = snapshot.val();
  let users = [];
  Object.keys(data).forEach(key => {
    users.push({
      id: key,
      username: data[key].username,
      user_email: data[key].email,
      user_id: data[key].uid,
    });
  });
  viewUsers.users = users;
});
}

data() {
return {
users: this.$f7.data.users, //the arrays had already been called/initialized at the app.vue
}

routes.js:

import UserPage from ‘…/pages/user.vue’;

{
path: ‘/user/:id/’,
component: UserPage,
}