1. 簡介
- 日常網(wǎng)站嘶窄，經(jīng)常需要進(jìn)行頁面的跳轉(zhuǎn)，對于單頁面網(wǎng)站距贷，就是通過不同組件的渲染來呈現(xiàn)不同的功能頁面柄冲。比如用戶單擊注冊按鈕，切換至注冊頁面忠蝗。單擊導(dǎo)航選項(xiàng)切換至對應(yīng)的頁面现横。用戶的切換操作，產(chǎn)生一個(gè)路徑阁最，路由管理器通過路徑在指定的位置渲染不同的組件戒祠，從而實(shí)現(xiàn)單頁面網(wǎng)站。
- 路徑并不僅僅是用戶點(diǎn)擊切換速种，也可以是在地址欄上進(jìn)行操作姜盈。因?yàn)槁窂揭差愃朴诰W(wǎng)址。
- 而路由管理器哟旗，就是管理這種對應(yīng)關(guān)系贩据，用來鏈接組件栋操、組件渲染位置、路徑饱亮。這種對應(yīng)關(guān)系也稱為路由矾芙。
2. 路徑這個(gè)樣子
- 看到一個(gè)#號了吧。近上。這個(gè)就是路徑
- 注意剔宪，如果安裝了路由管理器，訪問http://localhost:8080/網(wǎng)址壹无，會自動跳轉(zhuǎn)http://localhost:8080/#/這個(gè)路徑葱绒。所以路由表需要能夠處理這個(gè)路徑（或通過路由守衛(wèi)進(jìn)行跳轉(zhuǎn)）
http://localhost:8080/#/home
3. Vue的路由管理器安裝
npm install vue-router@4 -s
4. Vue的路由管理器的使用
- 因?yàn)槁酚杀頃絹碓酱螅宰詈檬橇硗庠谝粋€(gè)js文件上單獨(dú)管理路由表斗锭。如下是一個(gè)router.js文件
- routes是一個(gè)路由對象數(shù)組地淀。里面有路由的信息。文章后面會介紹路由對象的詳細(xì)屬性作用岖是。
- 可以看到帮毁，使用了路由管理器后，組件都需要交給路由管理器管理豺撑。烈疚。除了根組件。
- 如下定義了一個(gè)根路由聪轿，路徑是/home爷肝，這個(gè)路徑會把HomePage這個(gè)組件渲染在根組件的<router-viem>位置上
- 如下路由還定義了一個(gè)別名，alisa可以設(shè)置為字符串或一個(gè)數(shù)組陆错。
- 如下路由還有一個(gè)name屬性灯抛，可以更方便的跳轉(zhuǎn)到這個(gè)路由
import {createRouter, createWebHashHistory} from 'vue-router'
import ResultShow from '../components/ResultShow'
const routes = [
{path: '/home', component: HomePage, name:,alias:"/home/ll"},
]
const router = createRouter({history: createWebHashHistory(), routes: routes,})
export default router
- main.js注冊這個(gè)路由管理器
//導(dǎo)入路由配置
import router from './config/router'
const app =createApp(App)
app.use(router)
5. route-link
router-link可以理解為一個(gè)a元素，用戶點(diǎn)擊這個(gè)link會自動觸發(fā)path的路徑危号，然后路由管理器根據(jù)path在指定的位置渲染路由表上的組件牧愁。
<router-link to="some path"></router-link>
6. 路徑的高級用法
6.1帶參數(shù)路徑
- 如下表示帶了2個(gè)參數(shù)素邪，這些參數(shù)保存在$route.params.user外莲。組件可以直接引用。注意這個(gè)參數(shù)是全局的參數(shù)兔朦。
{path: '/home/:user/:id', component: HomePage, }
6.2指定參數(shù)個(gè)數(shù)
- 如下表示帶了多個(gè)參數(shù)偷线，/home/xiaoli/xiaowang都匹配這個(gè)規(guī)則，此時(shí)$route.params.user返回一個(gè)數(shù)組
{path: '/home/:user*', component: HomePage, }
6.3指定參數(shù)是否必須
- 如下表示參數(shù)非必須沽甥。如果沒有這個(gè)符號声邦，必須有參數(shù)才會跳轉(zhuǎn)到這個(gè)組件
{path: '/home/:user?', component: HomePage, name:}
7. 路由的嵌套
- 如果要渲染的路由位置不是在根組件，而是在某一個(gè)組件下面摆舟，可以用如下方法亥曹。
- 此時(shí)Friends組件會被渲染在HomePage組件的router-view上邓了。
const routes = [
{
path: '/home',
component: HomePage,
children:[
{
path:friends,
conponent:Friends
}
]
},
]
8. 動態(tài)頁面導(dǎo)航
- 采用這個(gè)辦法可以動態(tài)進(jìn)行導(dǎo)航，而不僅僅依靠</router-link>組件媳瞪∑可以在用戶的單擊事件中調(diào)用這個(gè)方法。比如導(dǎo)航菜單中點(diǎn)擊導(dǎo)航項(xiàng)后進(jìn)行導(dǎo)航
- 注意name導(dǎo)航方法蛇受，需要和路由表的name一致句葵。即通過名稱訪問方式
- 指定了path訪問方法，params參數(shù)會自動忽略
this.$router.push("/home")
this.$router.push({
name:,
params:{},
query:{},
path:
})
- 注意兢仰。乍丈。push是在瀏覽器的前進(jìn)后退上增加導(dǎo)航記錄。如果不希望增加導(dǎo)航記錄把将，可以用replace方法代替push轻专。參數(shù)都一樣。
9. 路由視圖的高級用法
9.1路由視圖的命名
- 路由視圖可以命名察蹲，以便支持多個(gè)同級路由視圖
- 沒有進(jìn)行命名的視圖铭若，默認(rèn)帶有default命名
<router-viem name="main"><router-viem>
9.2 在路由表指定組件對應(yīng)的具體路由視圖
- 如下表示一個(gè)路徑，同時(shí)在多個(gè)組件視圖上渲染多個(gè)組件递览。叼屠。當(dāng)然也可以只在一個(gè)路由視圖渲染一個(gè)組件。
{
path:"/home"
components: {
main:Components1,
default:Components2
}
}
10. 路由的重定向
路由的重定向表示訪問這個(gè)路由后直接跳轉(zhuǎn)至新路由绞铃。
- 直接指定路徑
{
path:
redirect:"/login"
}
- 指定參數(shù)镜雨、路由name等。屬性和$router.push一致
{
path:
redirect:{
name:pathName,
}
}
- 指定為一個(gè)函數(shù)儿捧，返回如上的對象
{
path:
redirect: to=>{
console.log(to)
return {path:,}
}
}
11. 路由傳參數(shù)
- 之前說了路由可以帶參數(shù)荚坞，可以直接訪問$route.params.username獲得參數(shù)。菲盾。但是這方法不好颓影。。組件重復(fù)性不夠高懒鉴。诡挂。也不夠安全。临谱。比較這些參數(shù)是全局的璃俗。。同時(shí)也是變動的悉默。城豁。同時(shí)和路由管理器緊緊綁定在一起了。
- 此時(shí)可以用路由傳參的方法抄课。
- 如下代碼的id參數(shù)會自動傳遞給組件的props中名為id的參數(shù)
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:true }
]
如果一個(gè)路徑對應(yīng)多個(gè)路由視圖唱星，需要如下
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:{routeViewName1: true, routeViewName1: true} }
]
- 如果要拋棄路由自帶的參數(shù)雳旅，重新指定參數(shù)，可以如下间聊。
- 可以看到通過路由傳參的方式岭辣，可以更加個(gè)性的渲染組件，組件也更加可以復(fù)用
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:{propName:value} }
]
- 還有一種更強(qiáng)大的方法甸饱，即props可以設(shè)置為函數(shù)方式
- 可以看到路由傳參是傳值沦童。。意思就是通過這個(gè)值來渲染組件叹话。
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:route=>{
return {
id: route.params.id,
}
} }
]
12. 路由守衛(wèi)
- 守衛(wèi)路由守衛(wèi)偷遗，就是在路由跳轉(zhuǎn)前或后執(zhí)行的一段函數(shù)⊥蘸可以理解為一個(gè)路由事件氏豌。作用是允許或拒絕路由跳轉(zhuǎn)，比如用戶沒有登錄热凹，所有跳轉(zhuǎn)都拒絕泵喘。有很多種方式可以定義路由守衛(wèi)。比如全局路由守衛(wèi)般妙、或針對單獨(dú)路由的守衛(wèi)
- 路由守衛(wèi)返回true表示同意此次跳轉(zhuǎn)纪铺，false表示拒絕。更多的情況下是返回一個(gè)對象碟渺，該對象和$router.push()方法的對象一樣鲜锚。
12.1 全局路由
- 全局路由定義在如上route.js的router對象上。
- beforeEach為路由前置守衛(wèi)苫拍。afterEach為路由后置守衛(wèi)芜繁。
router.beforeEach((to, from)=>{
console.log(to)
return false //拒絕此次跳轉(zhuǎn)
})
router.afterEach
12.2 特定路由的路由守衛(wèi)
- 注冊到路由表即可
- 有如下守衛(wèi)beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
routes = [
{
path:,
beforeRouteEnter: (to, from, next)=>{} //next為一個(gè)函數(shù)，路由放行后執(zhí)行
beforeRouteEnter: (route)=>{}
}
]
13. 路由的動態(tài)管理
- 在靜態(tài)路由表寫死的叫靜態(tài)路由绒极。如果需要在代碼中動態(tài)增加路由骏令，可以用如下方法
- 很容易理解，增加路由傳入的是一個(gè)路由對象垄提，刪除的話是一個(gè)路由名稱榔袋。getRoutes返回全部路由對象數(shù)組。
$router.addRoute()
$router.removeRoute()
$router.getRoutes()
