此筆記僅以個人理解的方式記錄
前言
這次要講的是 $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>
當我們點擊 getRoute 按紐時，會印出當前路由的資訊。
- fullpath : 為整路徑
- params : 路由攜帶參數
- query : 篩選搜尋參數
- 等等...
如果將路徑調整為 "/pageA/apple?like=mary" ，我們可以看到原本 /pageA 後面多了 apple 以及 ?like=mary 。如果你的路徑有設成 "/pageA/:userId" 的動態路由，這時候也可以利用 this.$route 取得，而 mary 為 query 選擇，如下圖
$router
$Router 為路由的 "方法" ，跟上面的 $route 不同，這邊舉例幾個常用的方法來介紹。
- push()
有包含歷史紀錄，假設要去 "/pageA" ，可這樣下 this.$router.push("/pageA") ，如果想使用 name 來導覽的話則 this.$router.push( {name:'名稱'} ) ，路由名稱為路由 JS 內設定，如下圖
- replace()
沒有!!!歷史紀錄，跟push不同
- go()
操作歷史紀錄的手段，如果下達 this.$router.go(-1) ，這樣會返回上一頁，
想返得知如果下達 this.$router.go(1) ，就為下一頁
- addRoute()
為臨時新增路由的方式，使用方式為 this.$router.addRoute( { } ) 這裡面是放物件，我新增了一個名為 "/newpageA" 的路徑，該路徑會對應到 "PageA.vue
" 組件。
- joker
- 2024/03/08
