vue+vue-router+axios+element-ui構建vue實戰項目之四（修改App.vue、router和page文件）

在上一篇《vue+vue-router+axios+element-ui構建vue實戰項目之三（解讀項目文件）》中，我們認識了項目中各文件夾和文件的作用，並且重新整理了一下，如果忘記了的朋友，不妨再去看一下。

那么這篇文章，我們就來修改下項目中的App.vue和router文件的內容，讓項目能夠重新運行起來。

 

修改App.vue文件

先把默認的代碼刪掉部分，改成這樣：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style lang="scss">
  @import "./style/style";
</style>

樣式引用src/style/style.scss文件，因此在App.vue文件中，按照這樣@import "./style/style"引用。

<style lang="scss">表示可以編寫或導入scss、sass、css文件。

引用scss文件時，可以省略.scss后綴。

更多關於sass的內容，可以學習阮一峰的《SASS用法指南》。

既然，我們引入了scss文件，就需要能夠編譯的工具，接下來我們需要下載兩個包工具，在終端輸入：

npm install -D node-sass sass-loader

由於網絡原因，我使用了cnpm下載：

 

修改router文件

目前，修改工作只進行了一部分，現在npm run dev是運行不了項目的，還需要我們修改router/index.js路由文件

這是修改之前的代碼：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

根據我們目前的目錄，代碼修改如下：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/page/index'
import content from '@/page/content'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首頁',     //path別名，可刪除
      meta:{
        title: '首頁'   //設置頁面title
      },
      component: index
    },
    {
      path: '/content/:id',
      name: '詳情',
      meta:{
        title: '詳情'
      },
      component: content
    }
  ]
})

path：‘/’ 就是默認首頁，也就是index頁面。

這里'/content/:id'，我們這里使用了動態路由匹配， :id 就是各內容頁面的ID， 例如‘/content/10’、‘/content/20’這種。

更多關於動態路由的知識，可以參閱官方文檔《動態路由匹配》。

好了，路由配置也完成了，接下來只剩最后一步，給頁面添加內容了。

 

index.vue和content.vue文件添加內容

index.vue文件：

<template>
    <div>index page</div>
</template>
<script>
    export default {

    }
</script>
<style lang='scss'>
    @import '..style/style'
</style>

content.vue文件：

<template>
    <div>content page</div>
</template>
<script>
    export default {

    }
</script>
<style lang='scss'>
    @import '..style/style'
</style>

好了，簡單的頁面內容有了，具體的內容后續再添加。

 

現在我們在終端輸入：

npm run dev

短暫的編譯成功后，終端顯示：

 

在瀏覽器輸入 http://localhost:8080，我們看到的內容：

 

接着我們輸入 http://localhost:8080/#/content/10，如下：

 

OK，基本的配置完成，下一節我們將學習如何在項目中配置Axios。

 

如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！