1. 虛擬路由
<a src = “#login”> 可以修改頁面的錨點(diǎn)值 多個(gè)a標(biāo)簽多個(gè)修改錨點(diǎn)值.
通過錨點(diǎn)值 哈希值的變化 觸發(fā)哈希事件的執(zhí)行 然后獲取到當(dāng)前的哈希值 錨點(diǎn)值.
根據(jù)錨點(diǎn)值 哈希值來更改 動(dòng)態(tài)組件的變量.
image.png
2. vue-router
vue擴(kuò)展 根據(jù)用戶點(diǎn)擊的不同router-link標(biāo)簽來切換錨點(diǎn)值 從而切換對(duì)應(yīng)綁定的組件.
-
引入vue-router文件
image.png -
編寫router-link標(biāo)簽 切換錨點(diǎn)值 放置切換組件的容器.
image.png -
初始化roter路由對(duì)象 編寫配置路徑(錨點(diǎn)值和組件綁定)
image.png -
路由重定向
image.png
image.png
