vue做后台管理系统左侧导航栏是如何加载的？

Question

用vue的iview框架做后台管理系统，想知道该如何让左侧导航栏载入，可以点击对应的标签进入不同的页面呢？各位大神有木有好的并且性能好的实现方法？

Answer 1

我是把这个侧边栏写成了一个公共的组件，在tab的父级元素（比如商品管理）上绑定on-select事件，选择菜单（MenuItem）时触发，会返回该menu的name属性，传递一个事件给父组件，父组件监听事件，然后获取传来的name值，根据name标识进行路由的跳转

Answer 2

1、template代码片段：

                <Menu width="auto" style="margin-top: 10px;" @on-select="onMenuselect">
                    <Submenu :name="index" v-for="(submenu,index) in Menu" :key="index">
                        <template slot="title">
                            <Icon type="ios-paper"></Icon>
                            <span>{{index}}</span>
                        </template>
                        <MenuItem :name="menuItem.router" v-for="(menuItem,index) in Menu[index]" :key="menuItem.router">
                            {{menuItem.function}}
                        </MenuItem>
                    </Submenu>
                </Menu>

2、数据代码片段：

import _ from 'lodash';//js工具类库

export default {        
        data() {
            let menus =[
                  {
                     title : '人员管理',
                     module: '组织机构',
                     router: '/person'
                  },
                  {
                     title : '权限管理',
                     module: '组织机构',
                     router: '/authority'
                  },
                  {
                     title : '文档配置',
                     module: '文档中心',
                     router: '/doc'
                  }
            ];
            return {
                Menu:_.groupBy(menus, function (n) {
                        return n.module;
                    }),
            };
        }
    }

Answer 3

menu组件有@on-select事件可以绑定，参数是item的name。这个name你可以对应vue-router里对应路由的name。
当然你可以把链接写在item的slot里，但要改下css样式，因为有item有padding，点边缘会无效。

Answer 4

静态写死，或者动态生成，都可以，其实就是把页面（main）分区域，类似以前的iframe
左侧导航一个组件，或者直接写在main里，然后在main里做具名的router-view，点击左侧导航时，切换或侧的router-view里对应的组件。

Answer 5

路由跳转
a标签连接过去 href="对应页面路由地址"

Answer 6

其实这个不好说，如果您有一定的基础，还不如找一些开源的项目，看别人的目录架构，和组件布置。
这里有一个项目，不是我的，不一定能跑起来。但是可以学习别人的构建方式。
http://www.cnblogs.com/taylor...

Answer 7

<router-link to="/xxx/xxxx">菜单</router-link>，然后定义链接所需要加载的vue地址