2023 Vue直播班筆記 - $route及$router

閱讀時間約 2 分鐘
此筆記僅以個人理解的方式記錄

前言

這次要講的是 $route$router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。


$route

先準備個元件名叫 PageA.vue,路徑為 '/pageA' 時 router-view 會渲染其組件

<template>
<p>pageA</p>
<button @click="getRoute">getRoute</button>
</template>
<script>
export default{
methods:{
getRoute(){
console.log(this.$route);
}
}
}
</script>
<style scoped></style>
raw-image


當我們點擊 getRoute 按紐時,會印出當前路由的資訊。

  • fullpath : 為整路徑
  • params : 路由攜帶參數
  • query : 篩選搜尋參數
  • 等等...
raw-image


如果將路徑調整為 "/pageA/apple?like=mary" ,我們可以看到原本 /pageA 後面多了 apple 以及 ?like=mary 。如果你的路徑有設成 "/pageA/:userId" 的動態路由,這時候也可以利用 this.$route 取得,而 mary 為 query 選擇,如下圖

raw-image


$router

$Router 為路由的 "方法" ,跟上面的 $route 不同,這邊舉例幾個常用的方法來介紹。

- push()

有包含歷史紀錄,假設要去 "/pageA" ,可這樣下 this.$router.push("/pageA") ,如果想使用 name 來導覽的話則 this.$router.push( {name:'名稱'} ) ,路由名稱為路由 JS 內設定,如下圖

raw-image


- replace()

沒有!!!歷史紀錄,跟push不同


- go()

操作歷史紀錄的手段,如果下達 this.$router.go(-1) ,這樣會返回上一頁

想返得知如果下達 this.$router.go(1) ,就為下一頁


- addRoute()

臨時新增路由的方式,使用方式為 this.$router.addRoute( { } ) 這裡面是放物件,我新增了一個名為 "/newpageA" 的路徑,該路徑會對應到 "PageA.vue

" 組件。

raw-image


  • joker
  • 2024/03/08
3會員
19內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
【程式學習日記】六角學院:2023 Vue 作品實戰班從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
Thumbnail
2024-05-11
Vue 泛型元件,讓 TypeScript 更精確大家好,我是鱈魚。(^∀^●)ノシ Vue 3.3 終於新增了泛型元件(Generic Component),這讓我們可以在 TypeScript 環境中得到更準確的型別提示。( •̀ ω •́ )✧ 讓我們一起來看看吧!
Thumbnail
2024-04-17
Vue 程式札記 : emit 事件發射組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射(emit)的機制,讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射(emit)機制,並通過實際範例演示其用法。
Thumbnail
2024-03-27
Vue 程式札記 : Props 組件傳遞資料在 Vue 中,組件是構建應用程式的基本單位,而 props 是組件間傳遞資料的主要方式之一,本文將介紹 Vue 中的 props,並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
Thumbnail
2024-03-21
Vue 程式札記 : 指令 v-bindv-bind 指令是最常用的指令之一,它用於將資料綁定到 HTML 屬性。本文將介v-bindnd指令的使用方法,並透過實際範例幫助你理解v-bindbind 指令。
Thumbnail
2024-03-15
Vue 程式札記 : 指令 v-modelv-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
Thumbnail
2024-03-11
Vue 程式札記 : 指令 v-for在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
Thumbnail
2024-03-08
Vue 程式札記 : 指令 v-if、v-show指令(Directives)是 Vue 中一個重要的概念,它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令:v-if 和 v-show,並通過實際範例來解釋它們的不同之處和使用場景。
Thumbnail
2024-03-06
2023-Vue六角直撥班心得為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
Thumbnail
2023-03-19