啊……對了，因為這篇文章通篇廢話，趕時間的話看紅字就行了……
Vue-cli的路由配置踩坑記錄，順便講下組件引入組件... (真的不是Vue-cil)
因為偏向於說明文章，所以文章就不賣關子了，免得讓小白們誤入歧途...雖然大部分時間皮一點比較開心~~
順便再說一下，
我裝的
8.12的
node，
vue-cli是
3.8.0的
8.12的
node，
vue-cli是
3.8.0的
先說說環境吧，我們課程設計要擼靜態網頁，但是呢，靜態網頁，兩年前我就會擼了好不，這種東西現在學校才教，實在沒有意思，正好最近又在搞nodejs，於是故事就這么來了……
因為一個網站不可能有一個頁面嘛，免不了要跳轉頁面，所以一般有多個頁面(沒錯這話就是為了充字數的...說起來我要充字數干嘛啊....)
但是呢，再Vue的腳手架里...只有XXX.vue的文件啊喂，這叫我怎么跳轉啊喂，怎么辦呢，只好去翻官方文檔(有時候最可信的，往往是官方文檔，但有時候，官方坑起來比你都恐怖...再次想起被某站官方推薦的 完整版大偵探皮卡丘跳舞 支配的恐怖)
咳...聊正經的，在官網的解釋說，你需要配置路由，來實現頁面的跳轉，可是路由是個啥啊，能吃不，很明顯能吃啊，吃完就撲街了。不過這里可以科普下路由的介紹(用自己的理解寫的，貼到了文章最后，點我跳轉...)
這里的路由，指的是一個虛擬的路由啦，一份配置文件，怎么配置呢，后面會說的，到目前為止，你了解的東西就是，如果想要在Vue腳手架中實現頁面跳轉，就需要配置路由。
其實這個也不難，當時做的時候，很多文章沒有特別說明，也沒有貼上項目的層級圖片...所以看着挺抽象的...比較難受，啰嗦了這么久，下面就開始上代碼了。
起步
首先
npm i @vue/cli -g
.....好吧，好吧，就這一次，下不為例，@vue/cli是Vue官方提供的一個命令，快速搭建3.x版本的Vue腳手架，2.x的下載方式是npm install vue-cli -globel，你看看，光是安裝就比3.x版本多敲了10個字符，所以，來玩3.x吧。
然后構建項目vue create project-name 喂！這里project-name可不是讓你直接輸個project-name的啊喂！這里指的是你的項目名稱，它可以是任何不違法的名稱.....
到這里，Vue腳手架搭好了，簡單吧...什么？跑題了？沒有啊，我們講的不就是如何搭建Vue腳手架的么？？配置路由？那不應該是隔壁老王干的事么？？？
配置之前的一些事兒
我先貼個當前目錄結構出來，你們可以對比一下，如果有問題的話...找找其它文章，或者直接聯系我，我的電話號碼是...呸，評論留言就好了
嗯...這個結構圖是直接復制bootstrap文檔里一個介紹目錄結構的段落，改內容的...這符號真畫不好Orz
src/
├── assets/
│ └── logo.png
├── components/
│ └── HelloWorld.vue
├── App.vue
└── main.js
理論上就這么多了，如果和你們看到的不一樣的話....那有很可能是我記性不好，下面列舉出一些文件或者是文件夾代表的意思:
- src -- 項目根目錄
- assets -- 資源文件(大概，應該同resource)
- components -- 組件庫
- HelloWorld.vue -- 一份HelloWorld模板
- App.vue -- 入口文件，全局模板(就這里一個大坑)
環境確認完畢，如果有不一樣的地方，希望可以與我提出....或者您就是那只有傳說中才會存在的大佬，可以直接看后面....
然后就是開始配置路由了，不過配置了也沒什么用，就一個HelloWorld組件，往哪跳哇，自己回調自己么？
這時候怎么辦呢，當然是多復制幾份唄，我在這里又創建了好多好多的組件，文件內容改改就好，文件目錄如下
先聲明下，加號內容是要新加的，減號內容是要刪除的，你們當前看到的的這個目錄大綱處於一個過程階段，一旦執行，則加上后面三個文件，並刪除第一個HelloWorld文件。
src/
├── assets/
│ └── logo.png
├── components/
- │ ├── HelloWorld.vue
+ │ ├── index.vue
+ │ ├── blog.vue
+ │ └── header.vue
├── App.vue
└── main.js
然后在新加的三個文件里分別寫點內容
<!-- index.vue -->
<template>
<header_page/>
<div>
Welcome to the —— index!
</div>
</template>
<script>
import header_page from './header'
export default {
name: "index", // 改成文件名或者你喜歡的名字好了...我看其它博客都用文件名的...
components: {
header_page
}
}
</script>
<style scoped></style>
<!-- blog.vue -->
<template>
<header_page/>
<div>
Welcome to the —— blog!
</div>
</template>
<script>
import header_page from './header'
export default {
name: "blog", // 改成文件名或者你喜歡的名字好了...我看其它博客都用文件名的...
components: {
header_page
}
}
</script>
<style scoped></style>
<!-- header.vue -->
<template>
<ul>
<router-link tag="li" to="/">
<a>
go_index
</a>
</router-link>
<router-link tag="li" to="/blog">
<a>
go_blog
</a>
</router-link>
</ul>
</template>
<script>
export default {
name: "header" // 改成文件名或者你喜歡的名字好了...我看其它博客都用文件名的...
}
</script>
<style scoped></style>
header.vue可以說下，但只是膚淺的，具體流程在最后我會說明一遍。
因為這里面寫前綴的話可讀性較差，所以我后面的直接簡寫為link和view
router-link標簽，它一般是與
router-view結合使用的，
link用來切換路由，
view負責渲染路由，其中
link的
tag屬性負責將該標簽轉換為
tag里的值，將
to轉換為a標簽里的
href
配置路由
router的文件夾，然后創建一個
index.js
然后我們的項目結構是這樣的:
src/
├── assets/
│ └── logo.png
├── components/
│ ├── index.vue
│ ├── blog.vue
│ └── header.vue
+ ├── router/
+ │ └── index.js
├── App.vue
└── main.js
配置router文件夾下的index文件
import Vue from 'vue';
import Router from 'vue-router'; // vue-cli全套不包括路由...需要自己下載，大概是因為有一些人比較喜歡用第三方插件，所以就不集成在一起了
import blog from '@/components/blog';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/', // 這個是指默認渲染的文件，這里我渲染了index文件
name: 'home',
component: () => import('@/components/index') // es6語法，采用了比較炫酷的寫法，具體看個人愛好，問題解決來自一位大佬
},
{
path: '/blog',
name: 'blog',
component: blog
},
]
})
vue-router沒有被安裝
package.json就能知道，devDependencies里並沒有vue-router
安裝下就好，npm i vue-router --save-dev，因為跳轉頁面不一定用的就是他們家的vue-router，所以保存項目就好，沒必要全局安裝
對於es6語法不懂的，網上找點文章看看，在Babel官網里寫es6語法的js，然后編譯一下看看轉換成的es5是什么樣子的，加深理解。
然后這樣就好了么？當然沒有！
接下來是對App.vue文件的配置，她已經被冷落太久了，提個名字吧。
<!-- app.vue -->
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
components: {}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App.vue就很簡單了，樣式不用動，基本什么都不用動，就像是main函數一樣，使用個執行函數就行了，剛聲明的時候一堆東西，都刪了，template里加上一個router-view，完事收工~
但是還是不行啊，這次編譯報錯，檢查下文件，發現main.js一直都沒動過，點進去看看，啊，原來
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router,
}).$mount('#app');
到這里簡單的案例也就完成了。
運行項目，npm run serve
流程走向
這里我就要先將文件結構丟進來了，並寫明文件所有的函數
src/
├── assets/
│ └── logo.png -- static resource
├── components/
│ ├── index.vue -- vue template
│ ├── blog.vue -- vue template
│ └── header.vue -- router-link
├── router/
│ └── index.js -- config router
├── App.vue -- router-view
└── main.js -- import XXX from './route'
main.js作為入口，導入路由之后並創建一個App.vue對象，在創建的時候App.vue里的router-view會預先渲染router的配置文件index.js中設置的默認的路由，在這里面就是首頁。在每個頁面中又調用了header組件，組件中有兩個超鏈接可以點，點擊跳轉路由。
沒錯，
vue實現的其實不是頁面跳轉，而是頁面的渲染。
App.vue作為公共層，App.vue里的內容會被渲染到所有層中，里面的router-view就是渲染路由，子頁切換了路由，App.vue就會順着渲染切換后的路由。
也就是說，vue中是偽娘頁面跳轉，重新渲染頁面來達到看起來像是頁面跳轉了一樣。
哦，差點忘了，這里應該還有一個路由的介紹...不過完全不想動，貼個名字吧
好了……說路由（個人也比較懵，以后查資料重新改一下……后面內容請無視）
互聯網中，數據是被分成多個包進行傳輸的，然后在包頭的地方會有一段跳轉地址(我應該畫點輔助圖的不過上傳圖片好麻煩的說所以晚點啦)
不過在這里，路由指的貌似是一種抽象的路由，只是負責了多個頁面的切換。