一、聲明式導(dǎo)航-導(dǎo)航鏈接

1.需求

實(shí)現(xiàn)導(dǎo)航高亮效果

如果使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)的話，需要給當(dāng)前跳轉(zhuǎn)的導(dǎo)航加樣式，同時(shí)要移除上一個(gè)a標(biāo)簽的樣式，太麻煩！！！

2.解決方案

vue-router 提供了一個(gè)全局組件 router-link (取代 a 標(biāo)簽)

• 能跳轉(zhuǎn)，配置to屬性指定路徑(必須) 。本質(zhì)還是 a 標(biāo)簽 ，to 無需 #
• 能高亮，默認(rèn)就會(huì)提供高亮類名，可以直接設(shè)置高亮樣式

語法： <router-link to="path的值"></router-link>

<div><div class="footer_wrap"><router-link to="/find">發(fā)現(xiàn)音樂</router-link><router-link to="/my">我的音樂</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的組件所展示的位置 --><router-view></router-view></div>
</div>

3.通過router-link自帶的兩個(gè)樣式進(jìn)行高亮

使用router-link跳轉(zhuǎn)后，我們發(fā)現(xiàn)。當(dāng)前點(diǎn)擊的鏈接默認(rèn)加了兩個(gè)class的值 router-link-exact-active和router-link-active

我們可以給任意一個(gè)class屬性添加高亮樣式即可實(shí)現(xiàn)功能

二、聲明式導(dǎo)航-兩個(gè)類名

當(dāng)我們使用<router-link></router-link>跳轉(zhuǎn)時(shí)，自動(dòng)給當(dāng)前導(dǎo)航加了兩個(gè)類名

1.router-link-active

模糊匹配（用的多）

to=“/my” 可以匹配 /my /my/a /my/b …
只要是以/my開頭的路徑 都可以和 to="/my"匹配到

2.router-link-exact-active

精確匹配

to=“/my” 僅可以匹配 /my

三、聲明式導(dǎo)航-自定義類名（了解）

1.問題

router-link的兩個(gè)高亮類名 太長(zhǎng)了，我們希望能定制怎么辦

2.解決方案

我們可以在創(chuàng)建路由對(duì)象時(shí)，額外配置兩個(gè)配置項(xiàng)即可。 linkActiveClass和linkExactActiveClass

const router = new VueRouter({routes: [...],linkActiveClass: "類名1",linkExactActiveClass: "類名2"
})

四、聲明式導(dǎo)航-查詢參數(shù)傳參

1.目標(biāo)

在跳轉(zhuǎn)路由時(shí)，進(jìn)行傳參

2.跳轉(zhuǎn)傳參

我們可以通過兩種方式，在跳轉(zhuǎn)的時(shí)候把所需要的參數(shù)傳到其他頁面中

• 查詢參數(shù)傳參
• 動(dòng)態(tài)路由傳參

3.查詢參數(shù)傳參

• 如何傳參？

  <router-link to="/path?參數(shù)名=值"></router-link>

• 如何接受參數(shù)

  固定用法：$router.query.參數(shù)名

五、聲明式導(dǎo)航-動(dòng)態(tài)路由傳參

1.動(dòng)態(tài)路由傳參方式

• 配置動(dòng)態(tài)路由

  動(dòng)態(tài)路由后面的參數(shù)可以隨便起名，但要有語義

  const router = new VueRouter({routes: [...,{ path: '/search/:words', component: Search }]
  })
  

• 配置導(dǎo)航鏈接

  to="/path/參數(shù)值"

• 對(duì)應(yīng)頁面組件接受參數(shù)

  $route.params.參數(shù)名

  params后面的參數(shù)名要和動(dòng)態(tài)路由配置的參數(shù)保持一致

2.查詢參數(shù)傳參 VS 動(dòng)態(tài)路由傳參

1. 查詢參數(shù)傳參 (比較適合傳多個(gè)參數(shù))

   1. 跳轉(zhuǎn)：to="/path?參數(shù)名=值&參數(shù)名2=值"
   2. 獲取：$route.query.參數(shù)名

2. 動(dòng)態(tài)路由傳參 (優(yōu)雅簡(jiǎn)潔，傳單個(gè)參數(shù)比較方便)

   1. 配置動(dòng)態(tài)路由：path: "/path/:參數(shù)名"
   2. 跳轉(zhuǎn)：to="/path/參數(shù)值"
   3. 獲取：$route.params.參數(shù)名

   注意：動(dòng)態(tài)路由也可以傳多個(gè)參數(shù)，但一般只傳一個(gè)

六、動(dòng)態(tài)路由參數(shù)的可選符(了解)

1.問題

配了路由 path:“/search/:words” 為什么按下面步驟操作，會(huì)未匹配到組件，顯示空白？

2.原因

/search/:words 表示，必須要傳參數(shù)。如果不傳參數(shù)，也希望匹配，可以加個(gè)可選符"？"

const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})

七、Vue路由-重定向

1.問題

網(wǎng)頁打開時(shí)， url 默認(rèn)是 / 路徑，未匹配到組件時(shí)，會(huì)出現(xiàn)空白

2.解決方案

重定向 → 匹配/后, 強(qiáng)制跳轉(zhuǎn) /home 路徑

3.語法

{ path: 匹配路徑, redirect: 重定向到的路徑 },
比如：
{ path:'/' ,redirect:'/home' }

八、Vue路由-404

1.作用

當(dāng)路徑找不到匹配時(shí)，給個(gè)提示頁面

2.位置

404的路由，雖然配置在任何一個(gè)位置都可以，但一般都配置在其他路由規(guī)則的最后面

3.語法

path: “*” (任意路徑) – 前面不匹配就命中最后這個(gè)

import NotFind from '@/views/NotFind'const router = new VueRouter({routes: [...{ path: '*', component: NotFind } //最后一個(gè)]
})

九、Vue路由-模式設(shè)置

1.問題

路由的路徑看起來不自然, 有#，能否切成真正路徑形式?

• hash路由(默認(rèn)) 例如: http://localhost:8080/#/home
• history路由(常用) 例如: http://localhost:8080/home (以后上線需要服務(wù)器端支持，開發(fā)環(huán)境webpack給規(guī)避掉了history模式的問題)

2.語法

const router = new VueRouter({mode:'histroy', //默認(rèn)是hashroutes:[]
})

十、編程式導(dǎo)航-兩種路由跳轉(zhuǎn)方式

1.問題

點(diǎn)擊按鈕跳轉(zhuǎn)如何實(shí)現(xiàn)？

2.方案

編程式導(dǎo)航：用JS代碼來進(jìn)行跳轉(zhuǎn)

3.語法

兩種語法：

• path 路徑跳轉(zhuǎn) （簡(jiǎn)易方便）
• name 命名路由跳轉(zhuǎn) (適合 path 路徑長(zhǎng)的場(chǎng)景)

4.path路徑跳轉(zhuǎn)語法

特點(diǎn)：簡(jiǎn)易方便

//簡(jiǎn)單寫法
this.$router.push('路由路徑')//完整寫法
this.$router.push({path: '路由路徑'
})

5.name命名路由跳轉(zhuǎn)

特點(diǎn)：適合 path 路徑長(zhǎng)的場(chǎng)景

語法：

• 路由規(guī)則，必須配置name配置項(xiàng)

  { name: '路由名', path: '/path/xxx', component: XXX },
  

• 通過name來進(jìn)行跳轉(zhuǎn)

  this.$router.push({name: '路由名'
  })
  

十一、編程式導(dǎo)航-path路徑跳轉(zhuǎn)傳參

1.問題

點(diǎn)擊搜索按鈕，跳轉(zhuǎn)需要把文本框中輸入的內(nèi)容傳到下一個(gè)頁面如何實(shí)現(xiàn)？

2.兩種傳參方式

1.查詢參數(shù) 傳參

2.動(dòng)態(tài)路由傳參

3.傳參

兩種跳轉(zhuǎn)方式，對(duì)于兩種傳參方式都支持：

① path 路徑跳轉(zhuǎn)傳參

② name 命名路由跳轉(zhuǎn)傳參

4.path路徑跳轉(zhuǎn)傳參（query傳參）

//簡(jiǎn)單寫法
this.$router.push('/路徑?參數(shù)名1=參數(shù)值1&參數(shù)2=參數(shù)值2')
//完整寫法
this.$router.push({path: '/路徑',query: {參數(shù)名1: '參數(shù)值1',參數(shù)名2: '參數(shù)值2'}
})

接受參數(shù)的方式依然是：$route.query.參數(shù)名

5.path路徑跳轉(zhuǎn)傳參（動(dòng)態(tài)路由傳參）

//簡(jiǎn)單寫法
this.$router.push('/路徑/參數(shù)值')
//完整寫法
this.$router.push({path: '/路徑/參數(shù)值'
})

接受參數(shù)的方式依然是：$route.params.參數(shù)值

注意：path不能配合params使用

十二、編程式導(dǎo)航-name命名路由傳參

1.name 命名路由跳轉(zhuǎn)傳參 (query傳參)

this.$router.push({name: '路由名字',query: {參數(shù)名1: '參數(shù)值1',參數(shù)名2: '參數(shù)值2'}
})

2.name 命名路由跳轉(zhuǎn)傳參 (動(dòng)態(tài)路由傳參)

this.$router.push({name: '路由名字',params: {參數(shù)名: '參數(shù)值',}
})

十三、VueCli 自定義創(chuàng)建項(xiàng)目

1.安裝腳手架 (已安裝)

npm i @vue/cli -g

2.創(chuàng)建項(xiàng)目

vue create demo01

• 選項(xiàng)

  Vue CLI v5.0.8
  ? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
  > Manually select features     選自定義
  

• 手動(dòng)選擇功能

  

• 選擇vue的版本

    3.x
  > 2.x
  

• 是否使用history模式

  

• 選擇css預(yù)處理

  

• 選擇eslint的風(fēng)格 （eslint 代碼規(guī)范的檢驗(yàn)工具，檢驗(yàn)代碼是否符合規(guī)范）

• 比如：const age = 18; => 報(bào)錯(cuò)！多加了分號(hào)！后面有工具，一保存，全部格式化成最規(guī)范的樣子

  

• 選擇校驗(yàn)的時(shí)機(jī) （直接回車）

  

• 選擇配置文件的生成方式 （直接回車）

  

• 是否保存預(yù)設(shè)，下次直接使用？ => 不保存，輸入 N

  

• 等待安裝，項(xiàng)目初始化完成

• 啟動(dòng)項(xiàng)目

  npm run serve
  

十四、通過eslint插件來實(shí)現(xiàn)自動(dòng)修正

1. eslint會(huì)自動(dòng)高亮錯(cuò)誤顯示
2. 通過配置，eslint會(huì)自動(dòng)幫助我們修復(fù)錯(cuò)誤

• 如何安裝

  

• 如何配置

  // 當(dāng)保存的時(shí)候，eslint自動(dòng)幫我們修復(fù)錯(cuò)誤
  "editor.codeActionsOnSave": {"source.fixAll": true
  },
  // 保存代碼，不自動(dòng)格式化
  "editor.formatOnSave": false
  

• 注意：eslint的配置文件必須在根目錄下，這個(gè)插件才能才能生效。打開項(xiàng)目必須以根目錄打開，一次打開一個(gè)項(xiàng)目

• 注意：使用了eslint校驗(yàn)之后，把vscode帶的那些格式化工具會(huì)禁用了 Beatify

settings.json 參考

{"window.zoomLevel": 2,"workbench.iconTheme": "vscode-icons","editor.tabSize": 2,"emmet.triggerExpansionOnTab": true,// 當(dāng)保存的時(shí)候，eslint自動(dòng)幫我們修復(fù)錯(cuò)誤"editor.codeActionsOnSave": {"source.fixAll": true},// 保存代碼，不自動(dòng)格式化"editor.formatOnSave": false
}