3.2?路由的兩種工作模式

路由有兩種工作模式，它們各有什么特點，該如何選擇呢？

3.2.1?history 模式（createWebHistory）

const router = createRouter({history: createWebHistory(), // history模式// ...路由規則
});

• 優點：URL 更加美觀，不帶有?#，更接近傳統網站的 URL
• 缺點：項目上線后，需要服務端配合處理路徑問題，否則刷新頁面可能會出現 404 錯

3.2.2?hash 模式（createWebHashHistory）

const router = createRouter({history: createWebHashHistory(), // hash模式// ...路由規則
});

3.4.1 寫法一：對象型path寫法? :to"{path:'src'}"

 <router-link :to="{path:'/home'}" active-class="active">首頁</router-link>

適用于需要動態生成路徑或攜帶參數的場景。

3.4.2?寫法二：字符串寫法（簡寫）：to:"src"

<routerLink to="/about" active-class="active">關于</routerLink>

適用于路徑固定的簡單場景，寫法簡潔。

3.4.3 寫法三：對象型name寫法? :to"{name:'name'}"

<routerLink :to="{name:'new'}" active-class="active">新頁面</routerLink>

需要先在路由規則中配置?name?屬性，優點是當路徑發生變化時，只需修改路由規則中的?path，不需要修改所有導航鏈接。

3.4.4 設置replace禁止返回上一個頁面

使用replace清除瀏覽器的歷史記錄，不能返回上次瀏覽頁面。

<router-link replace :to="{path:'/home'}" active-class="active">首頁</router-link>
<routerLink replace to="/about" active-class="active">關于</routerLink>
<routerLink replace :to="{name:'new'}" active-class="active">新頁面</routerLink>

四、路由嵌套

在實際開發中，我們經常會遇到頁面中嵌套子頁面的情況，比如新聞頁面中嵌套新聞詳情，這時就需要用到嵌套路由。

如何配置嵌套路由呢？

1. 編寫子組件（如?NewsDetail.vue）

2. 在路由規則中使用?children?配置項

// src/router/index.ts
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";
import Home from "../views/homeView.vue";
import About from "../views/aboutView.vue";
import New from "../views/newView.vue";
import NewList from "../views/newlistView.vue";
const roter =  createRouter({history:createWebHashHistory(),routes:[// 路由規則{path: "/home", // 路徑name: "home", // 路由名稱component: Home // 對應的組件},{path: "/about",name: "about",component: About},{path: "/New",name: "new",component: New,children:[{path:"NewList",name:"NewList",component:NewList}]},]
})
// 拋出路由對象，用于掛載到Vue實例中
export default roter

注意：

子路由不需要加"/",否則不會被識別為子路由！！！

在新聞頁面添加路由導航和路由渲染：

// src/views/newList.vue
<template><h1>我是新聞頁面</h1><router-link to="/new/NewList">新聞詳情</router-link><router-view></router-view>
</template>

五、路由傳參

在頁面跳轉時，我們經常需要傳遞參數（如新聞 ID、用戶 ID 等），Vue Router 提供了兩種主要的傳參方式：query 傳參和 params 傳參。

5.1 to + query 傳參

query 傳參的參數會顯示在 URL 中，形如??id=1&title=新聞標題。

query傳參的路徑樣式：

5.1.1 模板字符串的 query 傳參

①路由設置

{path: '/newList',name: 'newList',component: newListView,children:[{// 不要設置參數path: 'newDetail',name: 'newDetail',component: newDetailView,}]
},

②父路由傳遞參數

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新聞標題1',content: '新聞內容1'},{id: 1002,title: '新聞標題2',content: '新聞內容2'},{id: 1003,title: '新聞標題3',content: '新聞內容3'},{id: 1004,title: '新聞標題4',content: '新聞內容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link  :to="`/newList/newDetail?id=${anew.id}&title=${anew.title}&content=${anew.content}`">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template><style scoped></style>

③子路由接受參數

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news詳情頁面</h2><ul>// 注意怎么訪問參數<li>{{route.query.id}}</li><li>{{route.query.title}}</li><li>{{route.query.content}}</li></ul>
</template>

5.1.2 query 傳參 + 對象型參數

①路由設置

{path: '/newList',name: 'newList',component: newListView,children:[{// 不要設置參數path: 'newDetail',name: 'newDetail',component: newDetailView,}]
},

②父路由傳遞參數

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新聞標題1',content: '新聞內容1'},{id: 1002,title: '新聞標題2',content: '新聞內容2'},{id: 1003,title: '新聞標題3',content: '新聞內容3'},{id: 1004,title: '新聞標題4',content: '新聞內容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="{path:'/newList/newDetail',query:{id:anew.id,title:anew.title,content:anew.content}}">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受參數

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news詳情頁面</h2><ul>// 注意怎么訪問參數<li>{{route.query.id}}</li><li>{{route.query.title}}</li><li>{{route.query.content}}</li></ul>
</template>

5.1.3 name + query 傳參 + 對象型參數

①路由設置

{path: '/newList',name: 'newList',component: newListView,children:[{// 不要設置參數path: 'newDetail',name: 'newDetail',component: newDetailView,}]
},

②父路由傳遞參數

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新聞標題1',content: '新聞內容1'},{id: 1002,title: '新聞標題2',content: '新聞內容2'},{id: 1003,title: '新聞標題3',content: '新聞內容3'},{id: 1004,title: '新聞標題4',content: '新聞內容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="{name:'newDetail',query:{id:anew.id,title:anew.title,content:anew.content}}">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受參數

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news詳情頁面</h2><ul>// 注意怎么訪問參數<li>{{route.query.id}}</li><li>{{route.query.title}}</li><li>{{route.query.content}}</li></ul>
</template>

5.2?to + params 寫法傳參

params 傳參的參數需要在路由路徑中占位，URL 形式如?/news/detail/1/新聞標題。

5.2.1 params 傳參 + 模板字符串

①路由設置

{path: '/newList',name: 'newList',component: newListView,children:[{// 設置參數為路徑的一部分path: 'newDetail/:id/:title/:content',name: 'newDetail',component: newDetailView,}]
},

②父路由傳遞參數

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新聞標題1',content: '新聞內容1'},{id: 1002,title: '新聞標題2',content: '新聞內容2'},{id: 1003,title: '新聞標題3',content: '新聞內容3'},{id: 1004,title: '新聞標題4',content: '新聞內容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="`/newList/newDetail/${anew.id}/${anew.title}/${anew.content}`">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受參數

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news詳情頁面</h2><ul>// 注意怎么訪問參數<li>{{route.params.id}}</li><li>{{route.params.title}}</li><li>{{route.params.content}}</li></ul>
</template>

5.2.2 name + params 傳參 + 對象型參數

①路由設置

{path: '/newList',name: 'newList',component: newListView,children:[{// 設置參數為路徑的一部分path: 'newDetail/:id/:title/:content',name: 'newDetail',component: newDetailView,}]
},

②父路由傳遞參數

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新聞標題1',content: '新聞內容1'},{id: 1002,title: '新聞標題2',content: '新聞內容2'},{id: 1003,title: '新聞標題3',content: '新聞內容3'},{id: 1004,title: '新聞標題4',content: '新聞內容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="{name:'newDetail',params:{id:anew.id, title:anew.title, content:anew.content}}">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受參數

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news詳情頁面</h2><ul>// 注意怎么訪問參數<li>{{route.params.id}}</li><li>{{route.params.title}}</li><li>{{route.params.content}}</li></ul>
</template>

5.3??defineProps接受參數小技巧

這樣傳遞過來的參數獲取起來大家會不會覺得寫起來很復雜，其實使用defineProps就可以很好的解決父組件向子組件傳參的問題得到解決：

①在路由中修改

{path: '/newList',name: 'newList',component: newListView,children:[{// 設置參數為路徑的一部分path: 'newDetail/:id/:title/:content',name: 'newDetail',component: newDetailView,// 設置為defineProps為tureprops: true,}]
},

②在子組件中修改

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
// 接受路由參數
defineProps(['id', 'title', 'content'])
</script><template><h2>news詳情頁面</h2><ul>// 注意怎么訪問參數<li>{{id}}</li><li>{{title}}</li><li>{{content}}</li></ul>
</template>

5.4?query 傳參 vs params 傳參 總結