Vue 路由管理_2023-01-15

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()
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末塔淤,一起剝皮案震驚了整個(gè)濱河市摘昌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌高蜂,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件罕容,死亡現(xiàn)場離奇詭異备恤,居然都是意外死亡稿饰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進(jìn)店門露泊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喉镰,“玉大人,你說我怎么就攤上這事惭笑÷履罚” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵沉噩,是天一觀的道長捺宗。 經(jīng)常有香客問我,道長川蒙,這世上最難降的妖魔是什么蚜厉? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮畜眨,結(jié)果婚禮上昼牛,老公的妹妹穿的比我還像新娘。我一直安慰自己康聂,他們只是感情好贰健,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著恬汁,像睡著了一般霎烙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蕊连,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天悬垃,我揣著相機(jī)與錄音,去河邊找鬼甘苍。 笑死尝蠕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的载庭。 我是一名探鬼主播看彼,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼囚聚!你這毒婦竟也來了靖榕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤顽铸,失蹤者是張志新(化名)和其女友劉穎茁计,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谓松,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡星压,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年践剂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片娜膘。...
    茶點(diǎn)故事閱讀 40,973評論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡逊脯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出竣贪,到底是詐尸還是另有隱情军洼,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布演怎,位于F島的核電站匕争,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏颤枪。R本人自食惡果不足惜汗捡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望畏纲。 院中可真熱鬧扇住,春花似錦、人聲如沸盗胀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽票灰。三九已至女阀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間屑迂,已是汗流浹背浸策。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留惹盼,地道東北人庸汗。 一個(gè)月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像手报,于是被迫代替她去往敵國和親蚯舱。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容