在上篇文章给大家介绍了
1. 引入路由工具vue-router，切换视图
2. 使用vue-router
h(App)
})
3. 配置路由
在src目录下新建router-config.js，在router-cinfig.js中里面配置路由
4. 使用路由
...
5. 打开activePublic/index.vue文件，在页面随便写点东西，测试一下，路由是否配置成功
6. 启动项目cnpm run dev，看到如下页面，说明路由配置成功
7. 接下来，在activePublic/index.vue直接调用element-ui组件，完成活动发布的首页，完成好的代码如下
预览
上一步
上面这个页面又出现了一个router-view，为什么要这样放呢？因为step1、step2、step3、step4四个页面都含有顶部的"步骤"组件，所以这里把step1/2/3/4单独提出来放在4个页面中
8. 在router-config.js文件中配置二级路由
import step1 from './page/activePublic/step1.vue'
import step2 from './page/activePublic/step2.vue'
import step3 from './page/activePublic/step3.vue'
import step4 from './page/activePublic/step4.vue'
export default [
{
path:'/activePublic',// 配置子路由
children:[
// 路径为'/activePublic'，使用组件step1
{ path: '',component: step1 },// 路径为'/activePublic/step1'，使用组件step1
{ path: 'step1',// 路径为'/activePublic/step2'，使用组件step2
{ path: 'step2',component: step2 },{ path: 'step3',component: step3 },{ path: 'step4',component: step4 }
]
}
]
9. 重新启动项目cnpm run dev,在浏览器中默认路径为,根据我们设置的路由规则，就会显示step1.vue页面中的内容,接着完成step1.vue，代码如下，参考element表单组件
step1.vue
// TODO:这个页面有一个不足之处，时间选择器组件，表单验证出错，这是element组件的问题，留给大家自己去完善
名称" prop="name">
分类
dio v-for="item of ruleForm.fenLeis" :label="item.name">
{{tag.name}}
required style="width: 750px;">
required style="width: 750px;">
点击上传
