（4）添加vue-router

（4）添加vue-router

1 安裝vue-router

cnpm install vue-router --save

2 頁面準備

新建目錄/src/views/common，此目錄下面創建4個組件404.vue、home.vue、login.vue、theme.vue。每一個文件只有表示該文件的一個題目，如theme.vue爲：

<template>
  <div>
    <h1>theme</h1>
  </div>
</template>
<script>
export default {
}
</script>

3 路由配置

新建文件/src/router/index.js，內容以下：

/**
 * 全站路由配置
 *
 * 建議:
 * 1. 代碼中路由統一使用name屬性跳轉(不使用path屬性)
 */
import Vue from 'vue'
import Router from 'vue-router'

// 全局路由(無需嵌套上左右總體佈局)
const globalRoutes=[
  {
    path:'/404',
    component:require('@/views/common/404.vue').default,
    name:'404',
    meta:{title:'404未找到'}
  },
  {
    path:'/login',
    component:require('@/views/common/login.vue').default,
    name:'login',
    meta:{title:'登陸'}
  }
]
// 主入口路由(需嵌套上左右總體佈局)
const mainRoutes={
  path:'/',
  component:require('@/views/main.vue').default,
  name:'main',
  redirect:{name:'home'},
  meta:{title:'主入口總體佈局'},
  children:[
    {
      path:'/home',
      component:require('@/views/common/home.vue').default,
      name:'home',
      meta:{title:'首頁'}
    },
    {
      path:'/theme',
      component:require('@/views/common/theme.vue').default,
      name:'theme',
      meta:{title:'主題'}
    }
  ]
}

Vue.use(Router)
const router = new Router({
  mode:'hash',
  routes:globalRoutes.concat(mainRoutes)
})
export default router

所涉及到的內容，在vue-router的文檔中都能查到。

4 界面修改

4.1 App.vue修改

整站就是一個路由，很魔性。

<template>
    <transition name="fade">
      <router-view></router-view>
    </transition>  
</template>
<script>
export default {
}
</script>

根據路由配置，這個App.vue組件，只顯示三個界面，分別是/404、/login、/。 其中/這個路由下（顯示的是main.vue），還有子路由（因此main.vue裏面還有router-view）。在正常登陸後，顯示的就是子路由的內容。

4.2 main.vue主界面

新建/src/views/main.vue。 主要修改內容是，頂部爲nav標籤，左側是aside標籤，內容部分是main標籤，這些是html5語義標籤。

5 main.js修改

引入vue-router:

import Vue from 'vue'
import App from './App'
//引入vue-router
import router from '@/router'
import '@/assets/scss/index.scss'
Vue.config.productionTip = false
// 使用router
Vue.use(router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//配置router
  components: { App },
  template: '<App/>'
})