重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
使用vue.js2.0+ElementUI开发后台管理系统详细教程（二）
在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
创新互联建站专注于仁布网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供仁布营销型网站建设，仁布网站制作、仁布网页设计、仁布网站官网定制、微信小程序定制开发服务，打造仁布网络公司原创品牌,更为您提供仁布网站排名全网营销落地服务。
1. 引入路由工具vue-router，切换视图
# 安装vue-router cnpm install vue-router --save-dev
2. 使用vue-router
main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routeConfig from './router-config' // 引入router-config.js文件
//加载路由中间件
Vue.use(VueRouter)
//定义路由
const router = new VueRouter({
routes: routeConfig
})
new Vue({
router,
store,
el: "#app",
render: h => h(App)
})3. 配置路由
在src目录下新建router-config.js，在router-cinfig.js中里面配置路由
// 引入组件
import activePublic from './page/activePublic/index.vue'
export default [
{
// 配置路由，当路径为'/activePublic',使用组件activePublic
path:'/activePublic',component:activePublic,
}
]4. 使用路由
app.vue...
5. 打开activePublic/index.vue文件，在页面随便写点东西，测试一下，路由是否配置成功
6. 启动项目cnpm run dev，看到如下页面，说明路由配置成功
7. 接下来，在activePublic/index.vue直接调用element-ui组件，完成活动发布的首页，完成好的代码如下
activePublic/index.vue预览 上一步 下一步 发布活动 上面这个页面又出现了一个router-view，为什么要这样放呢？因为step1、step2、step3、step4四个页面都含有顶部的"步骤"组件，所以这里把step1/2/3/4单独提出来放在4个页面中
8. 在router-config.js文件中配置二级路由
router-config.js import activePublic from './page/activePublic/index.vue' 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',component:activePublic, // 配置子路由 children:[ // 路径为'/activePublic'，使用组件step1 { path: '' , component: step1 }, // 路径为'/activePublic/step1'，使用组件step1 { path: 'step1', component: step1 }, // 路径为'/activePublic/step2'，使用组件step2 { path: 'step2', component: step2 }, { path: 'step3', component: step3 }, { path: 'step4', component: step4 } ] } ]9. 重新启动项目cnpm run dev,在浏览器中默认路径为http://localhost:8080/#/activePublic,根据我们设置的路由规则，就会显示step1.vue页面中的内容,接着完成step1.vue，代码如下，参考element表单组件
step1.vue
// TODO:这个页面有一个不足之处，时间选择器组件，表单验证出错，这是element组件的问题，留给大家自己去完善设置 {{tag.name}} — — 无限制 限制 人 开通赞助广告 {{ feiLei.name }} 这个页面的大部分是使用的element组件，请自行对照官网实现。在这个页面中封装了一个二级地址选择插件，稍后会专门写一篇文章，详细介绍如何封装组件，先为大家奉上地址选择器源码。
10. 重新启动项目,cnpm run dev,检查页面上的功能是否都已经实现，是否有报错，如果有解决不了的错误，欢迎留言咨询，我会第一时间为您解答。
以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
当前文章：使用vue.js2.0+ElementUI开发后台管理系统详细教程（二）
标题链接：http://cqcxhl.com/article/gcgsde.html
