一.什么是單頁面應用?

• 定義和特點:所有功能都在一個HTML中實現

• 示例:網易云音樂

• 多頁面應用:京東和淘寶

• 區別:兩者的導航欄跳轉方式明顯不同

• 對比:

• • 單頁只有一個HTML頁面,按需更新性能高,開發效率快,用戶體驗好,但學習成本高,首屏加載慢,SEO較差
• • 多頁即多個HTML頁面,整頁更新的特點讓其性能較低,開發效率一般,用戶體驗一般,學習成本中等,但首屏加載快,SEO較好
    *SEO:搜索引擎優化,可以理解為搜索結果的友好度

• 使用場景:

• • 單頁:系統類網站,內部網站,文檔類網站,移動端網站
• • 多頁:公司官網,電商類網站

二.什么是路由?

由于單頁面應用的按需更新的特點,我們必須明確訪問路徑和組件的對應關系
這就需要用到路由,它實際上是一種映射關系

生活中的路由和Vue中的路由

路由器:IP和設備之間的映射關系
Vue中的路由:路徑和組件之間的映射關系
示例:

http://localhost:8080#home路徑 映射到 Home.vue組件
http://localhost:8080#comment路徑 映射到 Comment.vue組件
http://localhost:8080#search路徑 映射到 Search.vue組件

三.VueRouter(重點)

0.引出

在單頁面應用中,點擊導航欄的不同標簽,
首先,地址欄中的地址要發生變化.其次,導航欄下方的組件也要對應變化

–Vue官方提供了一個插件可實現以上功能,即VueRouter

1.介紹

• 作用:修改地址欄地址時,切換顯示匹配的組件
• 本質:Vue官方的一個路由插件,是一個第三方包

2.下載與使用(5個基本步驟+2個核心步驟)

2.1 五個基本步驟

• 下載:下載VueRouter模塊到當前工程項目中(Vue.2對應的版本是3.6.5)*

安裝命令:yarn add vue-router@3.6.5
注:此命令我按照報錯,最后用了這個命令:npm install vue-router@3.6.5 -g對于安裝版本的匹配,有個口訣叫"233 344",即:
Vue2+VueRouter3.x+Vuex3.x
"344"同理

• 引入

main.js==>若不考慮路由的封裝和抽離,所有路由相關代碼可先堆在main.js中import VueRouter from 'vue-router'

• 安裝注冊

//由于VueRouter是Vue的插件,所以必須先安裝注冊后才能使用
Vue.use(VueRouter)//內部會對組件進行全局的注冊,即插件的初始化

• 創建路由對象

const router=new VueRouter();//此時的路由對象和Vue實例還沒有建立關聯

• 注入:將路由對象注入到new Vue實例中,建立關聯

new Vue({render:h=>h(App),//router:router可簡寫如下:router
}).$mounted("#app");
//注入完成,代表著這個Vue實例已經被路由對象接管了
//效果:地址欄最后會多出一個"#"

完整代碼:main.js

//1.下載:在根目錄文件下下載:npm install vue-router@3.6.5 -gmain.js
//2.引入
import VueRouter from "vue-router"
//3.安裝注冊
Vue.use(VueRouter);//VueRouter插件初始化
//4.創建路由對象
const router=new VueRouter();//后續可以在里面添加路由規則
//5.注入
new Vue({render:h=>h(app),router,//router:router,簡寫成router,(router:rOther)
}).$mount("#app")//當前vue實例已被路由對象所管理
//成功標志:地址欄多了"#"

2.2 兩個核心步驟

• 項目代碼

//App.vue
<div class="footer_warp"><a>發現音樂</a><a>我的音樂</a><a>好友</a>
</div>
//新建Views文件夾下的FindMusic.vue,MyMusic.vue和MyFriends.vue三個組件,
//內容隨意,引入過程略

• step1:配置規則

//main.js或router/index.jsimport FindMusic from "..."
...
const router =new VueRouter({routes:[//配置規則{path:'/FindMusic',component:FindMusic},{path:'/MyMusic',component:MyMusic},{path:'/MyFriends',component:MyFriends},//此處可直觀看到路由的定義:path和component之間的映射
});

*path中的路徑沒有"."在前面,不要寫成相對路徑

• step2:配置導航

     <a href="#/FindMusic"">發現音樂</a><a href="#/MyMusic">我的音樂</a><a href="#/MyFriends">好友</a><div><!-- 這個標簽的位置決定了組件內容展示的位置--><router-view></router-view></div>

最終效果:點擊不同的a標簽,地址欄顯示不同的"#"后的內容

四.路由的封裝抽離

把所有的路由配置都放在main.js顯然是不合適的,因此要將路由模塊抽離出來,更利于維護

• 步驟

把剛剛在main.js 中寫的路由相關的代碼挪到新建的router/index.js中然后在main,js中導入

import router from "./router/index.js"

• 注意事項

1. 把代碼放入index.js 后,相對路徑會發生變化,此時要么調整成正確的相對路徑,要么使用"@"(代表src文件夾),寫入絕對路徑
2. 需要在index.js中重新引入Vue,因為使用到了Vue.use(VueRouter),其實main.js也有,只是引用語句import Vue from "vue"在main,js中是自動生成的
3. 最后需將路由對象導出:export default router;

五.聲明式導航

在Vue2中:
聲明式導航就是<router-link to=""></router-link>,<router-link to=""></router-link>就是聲明式導航
與聲明式導航相對的是編程式導航

1.導航鏈接

使用vue-router的全局組件<router-link to=""></router-link>代替a標簽,可以實現導航高亮效果(當前在哪個tag,它就有不同顏色

特點一:能跳轉

<router-link to="/FindMusic">發現音樂</router-link>

to不可省略且不用在路徑中加"#",對比a標簽:

<a href="#/FindMusic"">發現音樂</a>

特點二:能高亮

聲明式導航能實現自動高亮,默認提供高亮類名,可以通過高亮類名設置高亮樣式
(在控制臺能看到選中的a標簽自動獲得兩個類名)
route-link本質上還是a標簽,在控制臺查看元素,發現渲染出來的還是<a></a>

2.兩個高亮類名

<router-link to=""></router-link>會自動給當前導航添加兩個高亮類名,
分別叫:router-link-exact-active和router-link-active

2.1.區別

• router -link-active
  這個用得多,它是模糊匹配的
  如:a href="#/my"標簽中有這個類,那么它將匹配所有以my開頭的路徑:/my /my/a /my/b
• router-link-exact-active
  這個類時精確匹配的,寫的什么就匹配什么

2.2.為什么支持模糊匹配的類用得更多?

場景:網易云音樂在"發現音樂"的一級導航欄下面還有二級導航欄:推薦,排行榜,歌單等等
此時我們對頁面有一個需求,
即用戶在二級菜單下來回點擊的時候,一級導航欄"發現音樂"要保持高亮狀態
這時候就是模糊匹配中的/my/a和/my/b情況(/FindMusic/、 /FindMusic/TopList 和/FindMusic/PlayList)

2.3.自定義高亮類名

這兩個類名太長了,可以在router路由對象中進行定制:

//main.js或index.js
const router=new VueRouter({routes:[...],linkActiveClass:"新類名1",//比如"active"linkExactActiveClass:"新類名2",//比如:"exact-active"
});
//style
.active{}
.exact-active{}

3.跳轉傳參

• 目標:在跳轉路由的時候傳值
• 場景:
  在搜索欄下方的熱門搜索詞中,點擊其中一個,會跳轉到搜索該詞條的結果頁,即:
  這個詞條就是跳轉過程中所傳的值
• 方法:查詢參數傳參和動態路由傳參

3.1.查詢參數傳參–在配置路徑的同時進行傳參

• 語法:和地址欄傳參的格式一致,故被稱為查詢參數傳參

to="path?參書名1=參數值1&參數名2=參數值2"

• 獲取參數:對應頁面的組件接受傳過來的值

$router.query.參數名

• 示例:在首頁點擊不同文字后跳轉到搜索頁,并傳參

//首頁:Home.vue
<!-- 第一步:路徑后加?屬性名和屬性值鍵值對 -->
<router-link to="/search?key=特朗普">特朗普</router-link>
<router-link to="/search?key=中美關稅">中美關稅</router-link>
<router-link to="/search?key=貿易戰">貿易戰</router-link>//搜索頁:Search.vue
<div class="search"><!-- 第二步:對應頁面組件接受傳值 --><p>搜索關鍵字{{$route.query.key}}</p><p>搜索結果<ul><li>...</li></ul></p>
</div>/*
思考:在搜索頁中什么時候和如何拿到參數?
答:在created中獲取,此時要加this
created(){console.log(this.$route.query.key);
}
*/

3.2.動態路由傳參:路由不再是寫死的,而是動態的

• step1:配置動態路由

routes:[{path:"/search/:word", /*word是參數名,冒號不能省略,此時能匹配多個路徑*/components:Search}
]

• step2:配置導航鏈接

to="/path/參數值"

• step3:對應頁面的組件接受傳過來的值

$route.params.參數名,即:
$route.params.word

• 示例

//router/index.js
routes:[{path:"/home",component:Home},{path:"/search/:word",component:Search};//step1:配置動態路由
]//首頁:Home.vue
//step2:配置導航鏈接
<router-link to="/search/特朗普">特朗普</router-link>
<router-link to="/search.中美關稅">中美關稅</router-link>
<router-link to="/search/貿易戰">貿易戰</router-link>//搜索頁:Search.vue
//step3:接收傳值
<p>搜索關鍵字:{{$route.params.word}}
//同理在created中:
created(){console.log(this.$route.params.word);//可以從獲取到的值來對搜索結果進行渲染
}
/*
注意區別:獲取查詢參數:this.$route.query.參數名獲取動態路由參數:this.$route.query.參數名
*/

3.3.動態路由傳參的可選符(?)

如果沒有可選符可能會遇到的問題–
當配置路由的寫法是這樣的時候:

{path:"/search/:word",component:Search}

意味著必須攜帶參數,否則不通過傳參直接進入搜索頁時顯示是空白的
解決方法:使用可選符(?)

{path:"/search/:word?",component:Search}

直接進入搜索頁可以正常渲染,不會徐成空白

六.路由重定向