vue.js - 如何在vue中使用对象重定向到页面

Question

我有几个 vue 页面，一个页面是用户列表，第二个是权限列表，第三个是显示用户列表的 vue 组件和另一个显示用户详细信息的 vue 组件。

我想要做的是，如果我在权限页面上并且我想转到特定用户的详细信息，我想在该面板打开的情况下重定向。

我可以通过这样做来重定向用户页面，window.location.href = '/admin/users';但我不确定如何打开用户面板。

我认为如果我能做到$emit，那么可以将用户对象传递到用户主页，但如果我这样做，那将行不通window.location.href = '/admin/users';

这是我的代码。这有 2 个组件显示用户列表及其详细信息

<template>
    <div class="row">
        <div class="col-md-6">
            <users :emit="emit" :users="users"></users>
        </div>
        <div class="col-md-6">
            <detail v-if="userDetails" :emit="emit" :user="manageUser"></detail>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['emit', 'users'],
        data() {
            return {
                userDetails: false,
                manageUser: null
            }
        },
        mounted() {
            this.emit.$on('user', payload => {
                this.manageUser = payload.user;
                this.userDetails = true;
            });
        }
    }
</script>

这是我的用户列表

<template>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title text-success" style="cursor: pointer;" @click="createUser"> New User</h3>
        </div>
        <div class="card-body">
            <table class="table table-sm table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th style="width:120px;"></th>
                    </tr>
                </thead>
                <tbody>
                  <tr v-for="user in users">
                      <td>{{user.name}}</td>
                      <td style="text-align: right;">
                        <button class="btn btn-sm btn-outline-info" @click="detail(user)">Details</button>
                      </td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['emit', 'users'],
        data() {
            return {

            }
        },
        methods: {
            detail(user) {
                this.emit.$emit('user', { user: user });
            }
        }
    }
</script>

这是我的权限页面

<template>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{permission.name}}</strong></h3>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm table-striped">
                <thead>
                    <tr>
                        <th>User Name</th>
                        <th style="width:120px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.name}}</td>
                        <td style="text-align: right;">
                          <button class="btn btn-sm btn-outline-info" @click="detail(user)">Details</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['emit'],
        data() {
            return {
              users: []
            }
        },
        mounted() {
            this.allUsers();
        },
        methods: {

            allUsers() {
                this.loading = true;
                axios.get('/users').then(response => {
                    this.users = response.data.users;
                });
            },
            detail(user) {
                window.location.href = '/admin/users';
            }
        }
    }
</script>

标签： vue.js