文章目錄
-
-
- 1、資料請求axios的封裝使用
- 2、路由&一級路由
-
-
- （一）含路由項目建立流程：
- （二）一級路由配置
- 建立路由的過程（總結）
-
- >> 自己的第一個一級路由小程式
- （三）路由的跳轉方式：
-
- **>> 擴充1----.router-link-active**
- （四）路由規則通配符比對問題：`*` 或者 `demo-*`
-
- **>> 擴充2----路由比對順序問題**
- （五）路由的重定向：通過router中的redirect屬性配置的。
-
- 3、多級路由（二級及以上，嵌套路由）
-
-
- **>> 多級路由的建立過程：**
-
- 4、動态路由比對
-
-
-
- <1> 動态路徑參數（路由規則配置時）
- <2> 綁定參數（發送資料參數）
- <3> 擷取路由傳入的參數（擷取資料參數）
- 動态路由--知識點擴充query傳參
- params與query差別
- >> 下面我們通過一個小栗子來看一下動态路由傳參的具體流程。
- （一）promise是什麼？
- （二）為什麼會有promise
- （三）如何使用promise
-
-
- 其他
-
-
- 配置解析别名---修改檔案夾引用别名
-
- 總結
-
1、資料請求axios的封裝使用
以後工作中都進行封裝，是以不再使用傳統的方式進行資料請求。記得要在src下的api檔案夾下建立.js檔案，用promise封裝api。
（1）下載下傳axios：npm install --save axios（或者使用cnpm來下載下傳）
（2）在src（别名 @）下建立一個api的檔案夾，用來存放請求的.js檔案
另外，還可以自定義路徑别名，比如把 src/api 用 & 來替代。在項目根目錄下建立一個vue.config.js檔案，添加以下内容：
（3）對axios請求進行封裝，用 promise
- 在該請求js檔案裡面，首先要引入axios的資源包
- 然後用promise封裝axios請求資料，注意：一個請求一個函數
- 然後export導出（暴露）這個函數
//myaxios.js--- import axios from "axios" export function axioslink() { return new Promise((resolve, reject) => { axios({ url: "http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187", method:"get" }).then((ok)=>{ resolve(ok); }).catch((err)=>{ reject(err); }) }) }
（4）在元件中，使用該封裝好的子產品來進行資料請求
- 先引入并解構出該函數（CommonJS規範）
- 鈎子函數中使用封裝好的請求函數，将資料存放到元件裡面的變量中
- 頁面資料渲染
//myaxios.vue--- <template> <div> <!--圖檔的索引，是相對于public的index.html走的，是以直接寫就OK--> <img src="1.gif" alt="" v-if="!arr.length"> <ul v-else> 輸出arr: <li v-for="(item,index) in arr" :key="index">{{item.commentTxt}}</li> </ul> </div> </template> <script> // 因為是用es6子產品化export暴露的，是以這裡要用花括号解構出來屬于commonjs規範 import {axioslink} from "&/myaxios.js" //&代表 src/api ，自定義别名，下面有介紹 export default { data(){ return{ arr:'', } }, created() { // 函數axioslink傳回的是個promise對象，是以直接執行axioslink函數就相當于new了個新的promise axioslink().then((ok)=>{ this.arr=ok.data.data.commentList; console.log(ok); }).catch((err)=>{ console.log(err); }) }, } </script> <style scope> img{ width: 200px; height: 200; margin: 0 auto; } </style>
（5）然後将元件引入全局根元件裡面使用
//myApp.vue 打算将它作為全局根元件---
<template>
<div>
<myaxios/>
</div>
</template>
<script>
import myaxios from "%/myaxios.vue"
export default {
components:{
myaxios //引入後聲明一下這個元件然後再使用
}
}
</script>
<style scope>
</style>
（6）在main.js檔案裡更改全局根元件的路徑，改成自己現在寫的全局根元件的路徑，修改後的vue元件就是能夠打開的頁面。
（7）打開服務：npm run serve
在資料沒有請求到時展示"請稍後logo"，等資料出來了，就會切換到資料展示頁面。
以上就完成了vue工程化的資料的封裝請求、資料的渲染。
2、路由&一級路由
之前我們都用傳統頁面跳轉，比如 a标簽 、JavaScript Window Location、window的history對象。比如我們之前見過的js的跳轉方式：
window,location.href() 點傳回鍵能回來
window.location.reload(); 重新加載目前頁面
window.history.replaceState() 替換或者修改位址，無法再回到更改之前的url
window.history.go(number|URL) 可加載曆史記錄中的某個具體的頁面。
window.history.forward() 可加載曆史清單中的下一個 URL。
window.history.back() 可加載曆史清單中的前一個 URL（如果存在）。
調用後兩種方法的效果等價于點選前進按鈕或調用 history.go(1)。
在使用location.href、a标簽的href[非錨點的方式]等，進行頁面通路時，頁面會重新整理。history可以實作頁面不重新整理，原理是使用浏覽器曆史記錄，雖然不用再次請求資料，但跟路由差別還是挺大的。
是以現在我們學了vue，改用路由進行無縫跳轉。 我的文章：路由的兩種模式：hash與history 。
路由原理： 利用錨點來完成切換，頁面不重新整理。或者另一種說法，根據url不同，來分發不同的頁面。
路由的作用：
- 路由：所有的路徑都經由這個子產品進行重新配置設定（改變URL，在不重新請求頁面的情況下，更新頁面視圖。）
- 根據 url 錨點路徑，在容器中加載不同的子產品
-
完成 SPA（單頁面應用）的開發
這裡用到一個概念 SPA：單頁面應用 。
csdn 2019：淺談前端SPA（單頁面應用）
sf 2019：徹底理清前端單頁面應用（SPA）的實作原理 【精讀源碼】（超有價值）
簡書 2018：SPA（單頁面應用）和MPA（多頁面應用）
sf 2015：前端：将網站打造成單頁面應用SPA（一）
路由功能引入： 官方推薦 vue-router.js庫來引入路由功能子產品。但是呢，這都是适用于本地路由開發的。
我們下載下傳既然在用腳手架搭建項目，那就使用腳手架的自動建立路由功能吧。
（一）含路由項目建立流程：
（1）建立一個項目，比如命名為 myrouter
（2）然後選擇自定義選項（光标可以切換選項）
（3）選擇路由，光标到Router，然後空格選中。
（4）然後剩下的選項，就一路預設回車了。
（5）當下載下傳完成後，打開項目目錄，會發現，跟預設項目建立不同的是，src裡多了兩個檔案，分别是router、views。
（6）現在我們進入項目根目錄，把項目運作起來：npm run serve。可以發現，我們可以通過新增的 Home|About 來切換頁面，這就是路由的示範。（是不是跟頁籤很像）
（二）一級路由配置
用 Vue.js + Vue Router 建立單頁面應用，是非常簡單的。将元件 (components) 映射到路由 (routes)，然後告訴 Vue Router 在哪裡渲染它們。
主要分四步：
- 定義 (路由) 元件。 注意：可以使用template模闆進行html封裝，調用id屬性更加友善。
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） -
定義路由
使用component來進行路由映射元件。name屬性是命名路由通過一個名稱來辨別一個路由。
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） - 建立 router 執行個體，然後傳
routes
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） -
建立和挂載根執行個體。
建立一個vue執行個體，将 router 配置參數注入路由，進而讓整個應用都有路由功能。
然後使用 Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） <router-link to="/url"></router-link>
to
屬性用來設定跳轉連結.
路由出口
<router-view></router-view>
表明路由模版顯示的位置。
（系統會把
<router-link></router-link>
<a></a>
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向）
建立路由的過程（總結）
1、建立路由元件頁面
2、定義路由的規則
3、腳手架幫我們完成了兩步：執行個體化路由對象，把路由規則傳入路由執行個體化對象中
4、腳手架又幫我們完成了一步：把路由對象注入到vue執行個體（main.js中建立的vue執行個體化對象中）
5、建立路由出口 router-view
6、建立路由導航 router-link
>> 自己的第一個一級路由小程式
比如寫上面這個小例子，每次點選，不跳轉更新頁面，跟頁籤很像的功能，但又确實連結位址不同了。
（1）在
views檔案夾
裡，建立單元件頁面，是用于路由切換時展示的頁面。平常元件怎麼寫，它就怎麼寫。然後需要切換幾個頁面，就建立幾個頁面。
這裡我寫了
電影、圖書、廣播、小組
五個不同頁面，分别命名為
movie.vue / book.vue / broadcast.vue / group.vue
；然後裡面展示的東西很簡單，隻有一個詞組：
<template>
<div>
小組
</div>
</template>
（2）在
router檔案夾
裡的
index.js
中，路由映射元件。配好後，測試一下。類似于：http://127.0.0.1:3004/group
在index.js檔案夾裡給那四個頁面元件注冊路由，一個元件映射一個。
//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Movie from '../views/movie.vue'
import Book from '../views/book.vue'
import Broadcast from '../views/broadcast.vue'
import Group from '../views/group.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Movie',
component: Movie
},
{
path: '/book',
name: 'Book',
component: Book
},
{
path: '/broadcast',
name: 'Broadcast',
component: Broadcast
},
{
path: '/group',
name: 'Group',
component: Group
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
（3）在全局根元件裡面，使用
<router-link to="/url"></router-link>
設定路由跳轉（設定路由導航，使用路由path，因為已經映射到元件了嘛），和路由出口
<router-view/>
。
（4）或者可以将
<router-link to="/url"></router-link>
設定路由跳轉這塊兒，再放到另一個元件裡面。
我是把路由導航單獨放到了一個元件裡面，然後導入到全局根元件，這樣做是考慮到以後路由很多的話，不會再根元件裡面顯得太亂。
//routerlink.vue
<template>
<div class="nav_div">
<router-link to="/">電影</router-link>
<router-link to="/book666">圖書</router-link>
<router-link to="/broadcast">廣播</router-link>
<router-link to="/group">小組</router-link>
</div>
</template>
<script>
export default {
}
</script>
<style scope>
a{
padding: 0 10px;
color:#000;
text-decoration: none;
}
a:hover{
color:tomato;
}
.nav_div{
/* text-align:center;*/
border-bottom:1px solid teal;
margin-bottom:10px;
}
</style>
然後在全局根元件裡面寫入路由入口，并導入路由導航。
<template>
<div>
<routerlink></routerlink>
<router-view />
</div>
</template>
<script>
import routerlink from "@/components/routerlink.vue"
export default {
components:{
routerlink
}
}
</script>
（5）運作程式。
（三）路由的跳轉方式：
1、聲明式跳轉：使用
<router-link to=""></router-link>
（之前練習的小栗子都是聲明式跳轉方法）
2、程式設計式跳轉：
this.$ router.push()
（js使用的跳轉方式）
另外還有：
-
this.$router.replace ("替換的路徑");
-
this.$router.go(正數/負數);
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向）
<template>
<div class="nav_div">
<h1>聲明式路由導航</h1>
<router-link to="/movie">電影</router-link>
<router-link to="/book">圖書</router-link>
<router-link to="/broadcast">廣播</router-link>
<router-link to="/group">小組</router-link>
<h1>程式設計式路由導航</h1>
<button @click="fun(1)">電影</button>
<button @click="fun(2)">圖書</button>
</div>
</template>
<script>
export default {
methods: {
fun(num) {
switch (num) {
case 1:
// 跳轉到電影
// 使用程式設計式導航進行跳轉
this.$router.push("/movie");
break;
case 2:
this.$router.push("/book");
break;
}
}
}
};
</script>
>> 擴充1----.router-link-active
當
<router-link>
對應的路由比對成功，會自動設定 class 屬性值
.router-link-active
。通過自動設定的類名友善進行路由導航樣式設定。比如給導航選中的标簽設定背景顔色：
<style scope>
.router-link-active{
background: pink;
}
</style>
就會有下面這種效果：
（四）路由規則通配符比對問題： *
demo-*
*
demo-*
-
*
*
-
demo-*
當使用通配符路由時，請確定路由的順序是正确的，也就是說含有通配符的路由應該放在最後。路由 { path: ‘*’ } 通常用于用戶端 404 錯誤。
比如說下面這種效果：404錯誤 ； 是當使用者亂輸入内容時，提示找不到資訊 ； 然後我就設定 * 全部比對，一旦出現這種問題，我就跳轉到404頁面。
首先我們要先建立一個404頁面比如命名為
"no404.vue"
，然後去index.js頁面裡面定義路由規則：
import No404 from '../views/no404.vue'
//路由規則裡面配置
{
path: '/*', //通配符路徑比對，放最下面，因為優先級，按定義順序來比對
name: 'No404',
component: No404
},
>> 擴充2----路由比對順序問題
同一個路徑可以比對多個路由，此時，比對的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。
（五）路由的重定向：通過router中的redirect屬性配置的。
比如下面這個例子，當路由路徑比對到
"/"
時，會被重新定位到路徑為
"/movie"
，而我們從之前的例子中知道，路徑"/movie"會展示
'../views/movie.vue'
元件頁面。
// 路由重定向
{
path:'/', //當路徑比對"/"時，重定向到movie.vue頁面
redirect:"/movie"
},
3、多級路由（二級及以上，嵌套路由）
不過現在的APP三級及以上的路由已經很少見了，頂多到二級路由。
>> 多級路由的建立過程：
1、建立多級路由的路由元件頁面。
我在views中建立了二級路由索要切換的頁面元件，目錄結構如下：
裡面寫的東西很簡單，就一行字而已。比如 er1.vue 裡寫的是 “二級路由 111”。
2、定義路由的規則：
- 二級路由規則定義在一級路由的相關某個規則裡面
- 寫一個children屬性，與一級路由的path等同級
現在我想在圖書這個一級路由下插入二級路由，并展示出來。（跟之前一級路由的那個例子聯系起來）
先把這3個頁面導入到index.js中，然後在book這個一級路由規則中，通過children屬性配置二級路由規則。在設定二級路由path時有兩種方法，不加"/"，或者加上。
//index.js-------
// 一級路由
import Book from 'vs/book.vue'
// 二級路由
import Er1 from "vs/er/er1.vue"
import Er2 from "vs/er/er2.vue"
import Er3 from "vs/er/er3.vue"
Vue.use(VueRouter)
const routes = [
{
path: '/book',
name: 'Book',
component: Book,
children:[
//path寫法一：path:"不加斜杠"
{path:"er1",name:"Er1",component:Er1},
{path:"er2",name:"Er2",component:Er2},
//path寫法二：path:"加斜杠"
{path:"/er3",name:"Er3",component:Er3},
]
},
]
//執行個體化路由對象
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3、設定二級路由的出口，必須設定在它所依賴的一級路由頁面中。
//book.vue------
<template>
<div>
圖書
<Erlink/>
<router-view/>
</div>
</template>
<script>
import Erlink from "%/erlink.vue"
export default {
components:{
Erlink
}
}
</script>
4、設定二級路由的路由導航（聲明式 || 程式設計式），然後導入一級路由界面中。
注意：
- 如果在設定路由規則的時候path沒有加 “/”，那麼在設定< routerlink to=""></ routerlink>的時候，to屬性應該寫成
"/一級路徑/二級路徑"
- 如果加了斜杆，to屬性應該是
"/二級路由路徑"
- 感覺第一種比較好一些，因為結構很清晰
//erlink.vue-------
<template>
<div class="er">
//路由規則配置時path：“不加斜杠”
<router-link to="/book/er1">er1</router-link >
<router-link to="/book/er2">er2</router-link >
//路由規則配置時path：“加斜杠”
<router-link to="/er3">er3</router-link >
</div>
</template>
<style scope>
.er .router-link-active{
background: teal;
color:white;
}
</style>
到此為止，運作程式，是能夠展現出二級頁面的。
但是，卻不會自動展示首個二級路由元件的内容。想到了重定向，但有點麻煩，還有沒有更簡單的方法？可以設定一級路由導航的to屬性，更改成二級路由的路徑。
//原來的to屬性路徑
<router-link to="/book">圖書</router-link>
//如果index.js配置路由規則的path:"er1"，沒加斜杠；則更改成如下：
<router-link to="/book/er1">圖書</router-link>
//如果index.js配置路由規則的path:"/er3"，加斜杠；則更改成如下：
<router-link to="/er3">圖書</router-link>
當我們一點開圖書一級路由時，就會轉到二級路由的相關路徑元件頁面。
二級路由展示的小栗子就先到這裡了。
4、動态路由比對
- 動态路由也可以叫做路由傳參
- 元件的顯示内容，經常會根據使用者選擇的内容不同，在同一個元件中渲染不同内容。那麼在這個時候就需要動态路由。
<1> 動态路徑參數（路由規則配置時）
- 使用動态路由比對中的動态路徑參數來進行路由配置。
- 動态路徑參數以冒号
:
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向）
<2> 綁定參數（發送資料參數）
- 聲明式路由導航綁定參數有兩種方式，但是注意：params隻能通過路由配置中的name屬性來引用路由
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） - js方式進行參數綁定
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向）
<3> 擷取路由傳入的參數（擷取資料參數）
- 如果想得到路徑參數那麼使用
$route.params.id
this.$route.params.id
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） - 或者是使用this執行個體中的
this.$route.params.id
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向）
動态路由–知識點擴充query傳參
- 路由參數不需要添加内容
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） - 路由導航綁定參數的方式
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向） - js方式進行參數綁定
Vue.js note9（腳手架：資料請求封裝&一級路由&二級路由&動态路由傳參&路由重定向）
params與query差別
- 用法上的：query要用path來引入，params要用name來引入，接收參數都是類似的，分别是
this.$route.query.name
this.$route.params.name
- url展示上的
- params類似于post，query更加類似于我們ajax中get傳參，說的再簡單一點，前者在浏覽器位址欄中不顯示參數，後者顯示，是以params傳值相對安全一些。
>> 下面我們通過一個小栗子來看一下動态路由傳參的具體流程。
（1）建立一個資料展示元件頁面，命名為getDate.vue，用于以後擷取參數并展示出來。
（2）在index.js中配置路由規則。設定接收參數，在規則裡面比對傳遞的值。
//index.js-----
import GetData from "vs/getData.vue"
// 動态傳參 路由比對
{
path: '/getdata/:xiaoming',
name: 'GetData',
component: GetData
},
（3）在發送資料的頁面綁定參數，比如首頁。我這裡是movie.vue，用的js方法發送參數。
//movie.vue-----
<template>
<div>
電影------------<br>
<button @click="push1()">點選檢視 傳遞過去的資料</button>
</div>
</template>
<script>
export default {
methods:{
push1(){
this.$router.push("/getdata/data參數");//發送參數
}
}
}
</script>
（4）在getData.vue頁面接收參數并展示資料。
//getData.vue-----
<template>
<div>
<button @click="back()">傳回 <</button>
<p>獲得的資料1：{{this.$route.params.xiaoming}}</p>
<!--注意{{this.$route.params.xiaoming}}裡的$route沒有r，然後此處也可以寫{{$route.params.xiaoming}}-->
</div>
</template>
<script>
export default {
methods:{
back(){
this.$router.go(-1);//傳回到上一個頁面，讀取曆史記錄，不重新整理頁面
}
},
mounted() {
console.log(this.$route.params.xiaoming);
},
}
</script>
到目前為止，簡單的參數傳遞小栗就寫到這兒了。
params與query不同方式的總結及代碼示例
友友的部落格：動态路由傳參、vue動态路由與vue路由傳參
5、promise
（一）promise是什麼？
Promise是一種異步操作的解決方案，将寫法複雜的傳統的回調函數和監聽事件的異步操作，用同步代碼的形式表達出來。避免了多級異步操作的回調函數嵌套。
1、主要用于異步計算
2、可以将異步操作隊列化，按照期望的順序執行，傳回符合預期的結果
3、可以在對象之間傳遞和操作promise，幫助我們處理隊列
簡書：Javascript 中的神器——Promise
MDN：Promise 對象用于表示一個異步操作的最終完成 (或失敗), 及其結果值.
（二）為什麼會有promise
在處理多個有依賴關系的異步操作時，會出現回調地獄，且程式的可讀性變差。
（三）如何使用promise
Promise是一個對象，它的内部其實有三種狀态。
初始狀态（ pending ）
已完成（ fulfilled ）： resolve 方法可以使 Promise 對象的狀态改變成成功
已拒絕（ rejected ）： reject 方法則是将 Promise 對象的狀态改變為失敗
其他
配置解析别名—修改檔案夾引用别名
在項目的根路徑下vue.config.js的檔案中，添加下列代碼，configureWebpack與devServer同級。
configureWebpack:{
resolve:{
alias:{
// "自定義别名":"所指向的路徑"；别名也可以用符号代替，比如&
"com":"@/components"
}
}
}
總結
本篇介紹了axios資料請求封裝，一級路由，二級路由，動态路由資料傳參，另外還有promise的簡介。
也有一些小技巧，比如改變全局跟元件的指向，自定義檔案夾引用别名，404頁面的路由跳轉，路由重定向等。