在 Vue-JS 中为不同用户组显示不同菜单的最佳方式是什么？

Question

我正在学习 Vue-JS，但我无法理解为不同用户组显示不同菜单的最佳方式：任务、用户、管理员。

我应该使用任何全局变量并从 Vue 检查它的值吗？下一个代码是否适合这种情况？

  var userMenu = Vue.component("usermenu", Vue.extend({
    template: "#usermenu",
    components: {
     guestView: Vue.extend({
        template: `
              <p>Quest</p>
            `}),

      userView: Vue.extend({
        template: `
                <p>User</p>
            `}),     

      adminView: Vue.extend({
        template: `
                <p>Admin</p>
            `})

    }

如何切换视图？

我也尝试做类似的事情：

  var GuestMenu = Vue.extend({
        template: `
             <p>Guest</p>
            `});

   var UserMenu = Vue.extend({
        template: `
                <p>User</p>`});     

   var AdminMenu = Vue.extend({
        template: `
                <p>Admin</p>
                `});


   Vue.use(VueRouter)

var App = Vue.extend({
    components: {
      'topmenu': AdminMenu // how to change template here to another??
    }
})

这是我的代码http://jsfiddle.net/szwxvze2/

Answer 1

使用 v-if or v-show. You just need some way to know if the user is an admin, a guest or any other. So, let's say that you add a property to the userMenu component called userType, then to render the proper menu you should have something like this (I will assume that you are using browserify with vueify 可以更好地理解，如果没有，只需将整个代码包装在一个文件中即可。

app.js

var Vue = require('vue'); //unnecesary if you include vue through a <script> tag
var Menu= require('./components/menu.vue'); //if you are not using browseify, 
                                            //add the menu component code in app.js

new Vue({
  el: 'body',
  components: {
    topMenu: Menu    
  }
});

菜单组件

<template>
    <admin-view v-if="userType === 'admin'"></admin-view>
    <user-view v-if="userType === 'user'"></user-view>
    <guest-view v-if="userType === 'guest'"></guest-view>
</template>
<script>
import GuestMenu from 'guestmenu.vue' //if you are using vueify you can use es6 syntax
import AdminMenu from 'adminmenu.vue'
import UserMenu from 'usermenu.vue'

export default {
  data(){
    return {
      userType : '' //This should be handled by some model or any other way
    }
  },
  components : {
    GuestMenu ,
    AdminMenu ,
    UserMenu 
  }
}
</script>

GuestMenu 组件

<template>
    <p>Guest</p>
</template>

AdminMenuComponent

<template>
    <p>Admin</p>
</template>

用户菜单组件

<template>
    <p>User</p>
</template>

我希望现在已经足够清楚了。作为一个建议，我认为如果你对使用 vue 感兴趣，你应该将它与 browserify 或 webpack 一起使用，就像在这个例子中，它有助于 modularity

在 Vue-JS 中为不同用户组显示不同菜单的最佳方式是什么？

What is the best way to show different menus for different user group in Vue-JS?

vue.js