一.路由板塊封裝
（1）路由的封裝抽離
目標：將路由板塊抽離出來
好處：拆分板塊，利于維護
// 路由的使用步驟 5 + 2
// 5個基礎步驟
// 1. 下載 v3.6.5
// 2. 引入
// 3. 安裝注冊 Vue.use(Vue插件)
// 4. 創建路由對象
// 5. 注入到new Vue中，建立關聯// 2個核心步驟
// 1. 建組件(views目錄)，配規則
// 2. 準備導航鏈接，配置路由出口(匹配的組件展示的位置)
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter({// routes 路由規則們// route 一條路由規則 { path: 路徑, component: 組件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})Vue.config.productionTip = false
（2）聲明式導航 - 導航鏈接
使用router-link代替a標簽實現高亮
①能跳轉，配置to屬性指定路徑（必須），本質還是a標簽，to無需#
②能高亮，默認就會提供高亮類名，可以直接設置高亮樣式
<template><div><div class="footer_wrap"><router-link href="#/find">發現音樂</router-link><router-link href="#/my">我的音樂</router-link><router-link href="#/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的組件所展示的位置 --><router-view></router-view></div></div>
</template>
（3）聲明式導航-兩個類名
①router-link-active模糊匹配（用的多）
②router-link-exact-active精確匹配
const router = new VueRouter({// routes 路由規則們// route 一條路由規則 { path: 路徑, component: 組件 }routes: [...],linkActiveClass:"類名1"，linkExactActiveClass:"類名2"
})
（4）聲明式導航-跳轉傳參
目標：在跳轉路由時進行傳值
1.查詢參數傳參
①語法格式：to = “/path?參數值=值”
②對應頁面組件接受傳遞和過來的值：$routw . query . 參數名
2.動態路由傳參
①配置動態路由
// 創建了一個路由對象
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }]
})
②配置導航鏈接 to = ”/ path / 參數值
③對應頁面組件接受傳遞過來的值 $routw . params . 參數名
（5）Vue路由重定向
匹配path后，強制跳轉path路徑
語法：{ path：匹配路徑，redirect：重定向的路徑 }
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }]
})（6）Vue路由-404
語法：path：" * "（任意路徑）- 前面不匹配就命中最后一個
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})
（7）Vue路由 - 模式設置
const router = new VueRouter({// 注意：一旦采用了 history 模式，地址欄就沒有 #，需要后臺配置訪問規則mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'search', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})
（8）編程式導航 - 基本跳轉
①path路徑跳轉（簡易方便）
②name命名路由跳轉（適合path路徑長的場景）
template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">熱門搜索：<router-link to="/search/黑馬程序員">黑馬程序員</router-link><router-link to="/search/前端培訓">前端培訓</router-link><router-link to="/search/如何成為前端大牛">如何成為前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data () {return {inpValue: ''}},methods: {goSearch () {// 1. 通過路徑的方式跳轉// (1) this.$router.push('路由路徑') [簡寫]// this.$router.push('路由路徑?參數名=參數值')// this.$router.push('/search')// this.$router.push(`/search?key=${this.inpValue}`)// this.$router.push(`/search/${this.inpValue}`)// (2) this.$router.push({ [完整寫法] 更適合傳參// path: '路由路徑'// query: {// 參數名: 參數值,// 參數名: 參數值// }// })// this.$router.push({// path: '/search',// query: {// key: this.inpValue// }// })// this.$router.push({// path: `/search/${this.inpValue}`// })// 2. 通過命名路由的方式跳轉 (需要給路由起名字) 適合長路徑// this.$router.push({// name: '路由名'// query: { 參數名: 參數值 },// params: { 參數名: 參數值 }// })this.$router.push({name: 'search',// query: {// key: this.inpValue// }params: {words: this.inpValue}})}}
}
</script>
（9）編程式導航 - 路由傳參
①path路徑跳轉傳參（query傳參）
②name命名路由跳轉傳參
this.$router.push(`/路徑？參數名1=參數值1 & 參數名2=參數值2)
this.$router.push({path:`/路徑`,qurey:{參數名1='參數值1', 參數名2='參數值2'}
})
二.面經基礎版
（1）路由配置
配路由
①首頁和面經詳情，兩個一級路由
②首頁內嵌四個可切換頁面
（2）頁面請求渲染
2.實現功能
①首頁請求渲染
②跳轉傳參到詳情頁，詳情頁渲染
③組件緩存，優化性能
<template><div class="article-page"><divclass="article-item"><div class="head"><img src="http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png" alt="" /><div class="con"><p class="title">百度前端面經</p><p class="other">青春, 那么騷 | 2022-01-20</p></div></div><div class="body">雖然百度這幾年發展勢頭落后于AT，甚至快被京東趕上了，畢竟瘦死的駱駝比馬大，面試還是相當有難度和水準的。一面1.詢問你的項目經驗、學習經歷、主修語言（照實答）2.解釋ES6的暫時性死區（ let 和 var 的區別）3.箭頭函數、閉包、異步（老生常談，參見上文）4.高階函數（呃……我真不太清楚這是啥，聽起來挺像閉包的）5.求N的階乘末尾有多少個0，在線碼代碼或講思路（求因數，統計2、5、10的個數</div><div class="foot">點贊 44 | 瀏覽 315</div></div></div>
</template><script>
// 請求地址: https://mock.boxuegu.com/mock/3083/articles
// 請求方式: get
export default {name: 'ArticlePage',data () {return {}}
}
</script><style lang="less" scoped>
.article-page {background: #f5f5f5;
}
.article-item {margin-bottom: 10px;background: #fff;padding: 10px 15px;.head {display: flex;img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}.con {flex: 1;overflow: hidden;padding-left: 15px;p {margin: 0;line-height: 1.5;&.title {text-overflow: ellipsis;overflow: hidden;width: 100%;white-space: nowrap;}&.other {font-size: 10px;color: #999;}}}}.body {font-size: 14px;color: #666;line-height: 1.6;margin-top: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.foot {font-size: 12px;color: #999;margin-top: 10px;}
}
</style>
<template><div class="article-detail-page"><nav class="nav"><span class="back"><</span> 面經詳情</nav><header class="header"><h1>百度前端面經</h1><p>2022-01-20 | 315 瀏覽量 | 44 點贊數</p><p><imgsrc="http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png"alt=""/><span>青春少年</span></p></header><main class="body">雖然百度這幾年發展勢頭落后于AT, 甚至快被京東趕上了,畢竟瘦死的駱駝比馬大,面試還是相當有難度和水準的, 一面.....</main></div>
</template><script>
// 請求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 請求方式: get
export default {name: "ArticleDetailPage",data() {return {}}
}
</script><style lang="less" scoped>
.article-detail-page {.nav {height: 44px;border-bottom: 1px solid #e4e4e4;line-height: 44px;text-align: center;.back {font-size: 18px;color: #666;position: absolute;left: 10px;top: 0;transform: scale(1, 1.5);}}.header {padding: 0 15px;p {color: #999;font-size: 12px;display: flex;align-items: center;}img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}}.body {padding: 0 15px;}
}
</style>
<template><div class="h5-wrapper"><div class="content">內容</div><nav class="tabbar"><a href="#/article">面經</a><a href="#/collect">收藏</a><a href="#/like">喜歡</a><a href="#/user">我的</a></nav></div>
</template><script>
export default {name: "LayoutPage",
}
</script><style>
body {margin: 0;padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {.content {margin-bottom: 51px;}.tabbar {position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;display: flex;background: #fff;border-top: 1px solid #e4e4e4;a {flex: 1;text-decoration: none;font-size: 14px;color: #333;-webkit-tap-highlight-color: transparent;}}
}
</style>
<template><div class="h5-wrapper"><router-view></router-view></div>
</template><script>
export default {name: "h5-wrapper",
}
</script><style>
body {margin: 0;padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {.content {margin-bottom: 51px;}.tabbar {position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;display: flex;background: #fff;border-top: 1px solid #e4e4e4;a {flex: 1;text-decoration: none;font-size: 14px;color: #333;-webkit-tap-highlight-color: transparent;&.router-link-active {color: #fa0;}}}
}
</style>
三.自定義創建項目
目標：基于VueCli自定義創建項目架子
四.ESlint代碼規范
目標：認識代碼規范
代碼規范：一套寫代碼的約定規則。例如：“賦值符號的左右是否需要空格”“一局結束是否是要加分號”
添加鏈接描述
①字符串使用單引號 ‘abc’
②無分號 const name = ‘zs’
③關鍵字后加空格 if （name=‘ls’）{…}
④函數名后加空格 function name （arg）{…}
⑤堅持使用全等=== 摒棄 = =
代碼規范錯誤
①手動修改：根據錯誤提示一項一項手動修改糾正
②自動修改：vscode插件ESLint高亮錯誤，并通過配置自動幫助修復錯誤
