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

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(路由配置文件)

中配置上路由即可。

所以，剩下是“视频列表、个人信息、密码修改”等同理配置。