Vue+ElementUI零基礎搭建管理平臺（4）——添加組件component和路由route

vue組件component

一個vue組件由三部分組成：

• HTML
• js
• style

 

---

main.js

main.js定義了起始的App.vue組件

 

---

路由配置文件

router/index.js爲路由配置文件

初始狀態的路由

 

 

 

---

components/目錄下初始只有一個HelloWorld.vue組件。

 

添加組件並配置對應的路由

在components/下添加新的組件

• Index.vue
• Home.vue
• Application.vue
• Config.vue

#Applcation.vue內容
<template>
  <div id="application">
    application
  </div>
</template>

<script>
export default {
  name: 'Application'
}
</script>

<style>

</style>


#Config.vue內容
<template>
  <div id="config">
    config
  </div>
</template>

<script>
export default {
  name: 'Config'
}
</script>

<style>

</style>


#Home.vue內容
<template>
  <div id="home">
    home
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>

</style>


#Index.vue內容
<template>
  <div id="index">
    index
  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style>

</style>

 

更改index.js路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/Index'
import Home from '@/components/Home'
import Application from '@/components/Application'
import Config from '@/components/Config'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/index',
      name: 'Index',
      component: Index
    },
    {
      path:'/helloworld',
      name:'HelloWorld',
      component:HelloWorld
    },
    {
      path:'/Home',
      name:'Home',
      component:Home
    },
    {
      path:'/application',
      name:'Application',
      component:Application
    },
    {
      path:'/config',
      name:'Config',
      component:Config
    }
  ]
})

 

---

瀏覽器分別輸入

至此，添加組件和配置對應路由就完成了。

---

下面我們將對這些組件進行內容的修改，讓他們渲染出友好的頁面。