Question

我有一个laravel vue应用程序，我正在尝试创建一个链接到用户页面的角色和权限页面。

我遇到的问题是，当您进入权限页面并打开“用户”面板时然后选择一个用户，然后决定需要更改其详细信息然后单击他们的编辑按钮，这将带您进入用户页面。

到目前为止，我仅设法更改了网址，但该页面停留在权限页面上。

我的权限。vue

<template>
  <div>
    <h3>Users</h3>

    <div>
      <table>
        <thead>
          <tr>
            <th>Permission Name</th>
            <th style="width:240px;"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="permission in permissions">
            <td>{{permission.name}}</td>
            <td style="text-align: right;">
              <button class="btn btn-sm btn-outline-info" @click="users(permission)">
                Users
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

      }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
      users(permission) {
        this.emit.$emit('edit-users', { permission: permission });
      }
    }
  }
</script>

this.emit.$emit('edit-users', { permission: permission });然后在权限页面上打开用户面板

<template>
  <div>
    <h3>Users in <strong>{{permission.name}}</strong></h3>

    <div>
      <table>
        <thead>
          <tr>
            <th>User</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="edit(user)">
                Edit
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

    },
    mounted() {
      this.getUsers();
    },
    watch: {

    },
    methods: {
      getUsers() {
        axios.get('/admin/permissions/'+this.permission.name+'/users').then(response => {
          this.users = response.data.users;
        });
      },
      edit(user) {
        this.$router.push({name: 'Users', params: {id: user.id}});
      }
    }
  }
</script>

在我的Permissions.js中

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Users from "../users/Users";

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/admin/users/:id',
      name: 'Users',
      component: Users
    }
  ]
})

if (document.getElementById('permissions')) {
  const app = new Vue({
    el: "#permissions",
    router,
    data() {
      return {
        emit: new Vue(),
      }
    },
    methods: {

    },
    mounted() {

    }
  });
}

如何让vue路由器转到另一页

0 个答案: