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

在上一篇《vue+vue-router+axios+element-ui構建vue實戰項目之三(解讀項目文件)》中,咱們認識了項目中各文件夾和文件的做用,而且從新整理了一下,若是忘記了的朋友,不妨再去看一下。css

那麼這篇文章,咱們就來修改下項目中的App.vue和router文件的內容,讓項目可以從新運行起來。html

 

修改App.vue文件

先把默認的代碼刪掉部分,改爲這樣:vue

 1 <template>
 2   <div id="app">
 3     <router-view></router-view>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'App'
10 }
11 </script>
12 
13 <style lang="scss">
14   @import "./style/style";
15 </style>

樣式引用src/style/style.scss文件,所以在App.vue文件中,按照這樣@import "./style/style"引用。node

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

引用scss文件時,能夠省略.scss後綴。vue-router

更多關於sass的內容,能夠學習阮一峯的《SASS用法指南》。npm

既然,咱們引入了scss文件,就須要可以編譯的工具,接下來咱們須要下載兩個包工具,在終端輸入:element-ui

1 npm install -D node-sass sass-loader

因爲網絡緣由,我使用了cnpm下載:axios

 

修改router文件

目前,修改工做只進行了一部分,如今npm run dev是運行不了項目的,還須要咱們修改router/index.js路由文件瀏覽器

這是修改以前的代碼:

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import HelloWorld from '@/components/HelloWorld'
 4 
 5 Vue.use(Router)
 6 
 7 export default new Router({
 8   routes: [
 9     {
10       path: '/',
11       name: 'HelloWorld',
12       component: HelloWorld
13     }
14   ]
15 })

根據咱們目前的目錄,代碼修改以下:

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import index from '@/page/index'
 4 import content from '@/page/content'
 5 
 6 Vue.use(Router)
 7 
 8 export default new Router({
 9   routes: [
10     {
11       path: '/',
12       name: '首頁',     //path別名,可刪除
13       meta:{
14         title: '首頁'   //設置頁面title
15       },
16       component: index
17     },
18     {
19       path: '/content/:id',
20       name: '詳情',
21       meta:{
22         title: '詳情'
23       },
24       component: content
25     }
26   ]
27 })

path:‘/’ 就是默認首頁,也就是index頁面。

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

更多關於動態路由的知識,能夠參閱官方文檔《動態路由匹配》。

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

 

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

index.vue文件:

 1 <template>
 2     <div>index page</div>
 3 </template>
 4 <script>
 5     export default {
 6 
 7     }
 8 </script>
 9 <style lang='scss'>
10     @import '..style/style'
11 </style>

content.vue文件:

 1 <template>
 2     <div>content page</div>
 3 </template>
 4 <script>
 5     export default {
 6 
 7     }
 8 </script>
 9 <style lang='scss'>
10     @import '..style/style'
11 </style>

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

 

如今咱們在終端輸入:

npm run dev

短暫的編譯成功後,終端顯示:

 

在瀏覽器輸入 http://localhost:8080,咱們看到的內容:

 

接着咱們輸入 http://localhost:8080/#/content/10,以下:

 

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

 

若是文章中存在錯誤的地方,麻煩請你們在評論中指正,以避免誤人子弟,謝謝!
相關文章
相關標籤/搜索