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或v-show。您只需要一些方法来了解用户是管理员，访客还是其他任何人。所以，让我们说你向userMenu组件添加一个名为userType的属性，然后呈现正确的菜单，你应该有这样的东西（我假设你正在使用browserify 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>

<强> UserMenuComponent

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

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

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

1 个答案: