vue2.0 + element-ui 实战项目-导航栏跳转路由(二)

自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~

Element UI手册:https://cloud.tencent.com/developer/doc/1270
github地址:https://github.com/ElemeFE/element

vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html
element-ui官方网站:https://element.eleme.cn/#/zh-CN


1:components
新建页面

图片.png

2:打开app.vue
写代码





3:路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import Chip from '@/views/chip'
import HelloWorld from '@/components/HelloWorld'
import Device from '@/views/device'
import Params from '@/views/params'
import Picture from '@/views/picture'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/views/chip',
      name: 'chip',
      component: Chip
    }, {
      path: '/views/device',
      name: 'device',
      component: Device
    },
     {
      path: '/views/params',
      name: 'params',
      component: Params
    },{
      path: '/views/picture',
      name: 'picture',
      component: Picture
    }
  ]
})

4:新页面的内容,我写的比较简单,需要自己写下功能需求所在的代码
picture.vue






5:效果就可以看了


你可能感兴趣的:(vue2.0 + element-ui 实战项目-导航栏跳转路由(二))