03 Vue3路由

songxia777發表於2024-04-15
Vue路由

Vue3的路由與Vue2相似，關於 Vue2的路由器相關可以參考
Vue2 vue-router
下面是一些補充

路由器工作模式

  1. history模式

    優點：URL更加美觀，不帶有#，更接近傳統的網站URL。

    缺點：後期專案上線，需要服務端配合處理路徑問題，否則重新整理會有404錯誤。

    const router = createRouter({
	history:createWebHistory(), //history模式
	/******/
})

  2. hash模式

    優點：相容性更好，因為不需要伺服器端處理路徑。

    缺點：URL帶有#不太美觀，且在SEO最佳化方面相對較差。

    const router = createRouter({
	history:createWebHashHistory(), //hash模式
	/******/
})

命名路由

可以簡化路由跳轉及傳參

給路由規則命名：

routes:[
  {
    name:'zhuye',
    path:'/home',
    // 設定重定向
    redirect:'/',
    component:Home
  },
  {
    name:'xinwen',
    path:'/news',
    component:News,
  },
  {
    name:'guanyu',
    path:'/about',
    component:About
  }
]

to的兩種寫法

字串寫法

<router-link active-class="active" to="/home">主頁</router-link>

active-class 是自定義活動類的名稱

物件寫法

# 可以寫路徑
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

# 也可以寫路由的名稱
<router-link active-class="active" :to="{name:'zhuye'}">Home</router-link>

路由傳參

query引數

傳遞引數

     <!-- 跳轉並攜帶query引數（to的字串寫法） -->
      <router-link to="/news/detail?a=1&b=2&content=歡迎你">
      	跳轉
      </router-link>

      <!-- 跳轉並攜帶query引數（to的物件寫法） -->
      <RouterLink 
        :to="{
          //name:'xiang', //用name也可以跳轉
          path:'/news/detail',
          query:{
            id:news.id,
            title:news.title,
            content:news.content
          }
        }"
      >
        {{news.title}}
      </RouterLink>

接收引數-【route.query】

  ```js
  import {useRoute} from 'vue-router'
  const route = useRoute()
  // 列印query引數
  console.log(route.query)
  ```

params引數

一定要設定路由佔位

路由規則佔位

{
	name:'xiang',
	// 設定佔位符，？表示該引數可傳可不傳
	path:'detail/:id/:title/:content?',
	component:Detail,
}

傳遞引數

     <!-- 跳轉並攜帶params引數（to的字串寫法），不用加&連線，直接寫內容即可 -->
      <RouterLink :to="`/news/detail/001/新聞001/內容001`">{{news.title}}</RouterLink>


      <!-- 跳轉並攜帶params引數（to的物件寫法) -->
      <RouterLink 
        :to="{
          name:'xiang', // 必須用name跳轉，不可以使用path
          params:{
            id:news.id,
            title:news.title,
            content:news.title
          }
        }"
      >
        {{news.title}}
      </RouterLink>

接收引數-【route.params】

     import {useRoute} from 'vue-router'
     const route = useRoute()
     // 列印params引數
     console.log(route.params)

備註1：傳遞params引數時，若使用to的物件寫法，必須使用name配置項，不能用path。

備註2：傳遞params引數時，需要提前在規則中佔位。

路由的props配置--【推薦】

作用：讓路由元件更方便的收到引數（可以將路由引數作為props傳給元件），直接引用使用

{
	name:'xiang',
	path:'detail',
	component:Detail,

  // props的布林值寫法，作用：把收到了每一組【params引數】，作為props傳給Detail元件--【主要params傳參】
  // props:true
  
  // props的函式寫法，作用：把返回的物件中每一組key-value作為props傳給Detail元件
  props(route){
    return route.query
  }
}

接收引數的時候，直接接收引數，並使用

<script lang="ts" setup>
defineProps(['id', 'title', 'content']);
</script>

replace屬性

  1. 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式。

  2. 瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace：

    • push是追加歷史記錄（預設值）
    • replace是 替換當前記錄

  3. 開啟replace模式：

    <RouterLink replace .......>News</RouterLink>

程式設計式導航

路由元件的兩個重要的屬性：$route和$router變成了兩個hooks

import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

// 接收引數
console.log(route.query)
console.log(route.parmas)

// 路由跳轉
console.log(router.push)
console.log(router.replace)

// 參考
router.push('/news')
router.push({
  path:'/news',
  query:{
    a:XXX
    b:xxx
  }
})

相關文章