视频电商网站实战 - 侧边栏菜单、整个后台的布局、路由配置

1.路由
文档：http://router.vuejs.org/zh-cn/
安装：

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

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

2.编写路由配置文件config/RouterConfig.js，内容如下：

import VueRouter from 'vue-router';
import memberIndex from './../components/member/index.vue';

export const  routerConfig = new VueRouter({
    routes:[
        { path: '/', component: memberIndex, name:'memberindex'}
    ]
});

从上面代码，可以看出，我们在路由中配置了index.vue组件，这个组件我们稍后在细说。
这个路由配置，需要在Vue实例化的时候传入，所以又要来到入口文件member-index.js：

//引入路由配置
import {routerConfig} from './../config/RouterConfig';
//实例化Vue
new Vue({
    el:'.container',
    store:vuex_config,
    router:routerConfig, //配置路由
});

可以看到像之前使用vuex一样，在实例化Vue的时候传入对应的配置文件。

3.我们在路由配置中，已经配置了访问/就加载首页组件(index.vue)，但是我们还少了异步，不然不会生效。还必须修改一下我们的模板文件pages/member/index.html，在导航栏组件下面加入：

 <router-view></router-view>

这样，通过路由加载的组件，就会生效了。

4.index.vue代码：

<template>
    <div>
        <el-row>
            <el-col :span="6">
                <memberMenu></memberMenu>
            </el-col>
            <el-col :span="18"></el-col>
        </el-row>
    </div>
</template>
<script>
    import memberMenu from './menu.vue';
    export default{
        components:{
            memberMenu:memberMenu, //加入组件
        }
    }
</script>

可以看到在index.vue中，我们还嵌入了menu.vue。

5.meue.vue

<template>
    <div>
        <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" :router="true">
            <el-menu-item-group title="视频管理">
                <el-menu-item index="/pub"><i class="el-icon-message"></i>发布视频</el-menu-item>
                <el-menu-item index=""><i class="el-icon-message"></i>视频列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="个人资料">
                <el-menu-item index="3"><i class="el-icon-message"></i>个人信息</el-menu-item>
                <el-menu-item index="4"><i class="el-icon-message"></i>密码修改</el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </div>
</template>

上面代码要注意2个地方，一个是给父元素上的:router="true"这样表表示支持路由；一个是/pub，这是我们的路径名词。

6..嵌套路由
前面代码中我们已经知道访问路由/pub就加载“发布视频”组件，这个是需要配置到路由中的。
RouteConfig.js:

import VueRouter from 'vue-router';
import memberIndex from './../components/member/index.vue';
import publish from './../components/member/publish.vue';

export const  routerConfig = new VueRouter({
    routes:[
        { path: '/', component: memberIndex, name:'memberindex',
            children:[{path: '/pub', component: publish, name:'pub'}]
        }
    ]
});

显然，我们把publish组件配置到了index组件中，作为它的子路由。意思就是先访问会员中心首页，点击左侧菜单栏，然后加载对应的组件内容。

7.publish.vue，代码如下：

<template>
    <div>
        发布视频
    </div>
</template>

访问http://127.0.0.1:8080/member/#/ 进入首页，访问http://127.0.0.1:8080/member/#/pub 进入发布视频页面。
我们在memu.vue上写好了路径，然后在RouterConfig.js(路由配置文件)中配置上路由即可。
所以，剩下是“视频列表、个人信息、密码修改”等同理配置。