前言：
在編寫vue里的SPA（Single Page Application單頁面應(yīng)用）時，我們始終繞不開路由的使用，vue-router4.0版里有一些重要更新，在這里分享給大家。
一、什么是 Vue Router ？
vue-router是vue.js官方給出的路由解決方案，能夠輕松的管理SPA項目中組件的切換
Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構(gòu)建單頁應(yīng)用變得輕而易舉。功能包括：
- List item
- 嵌套路由映射
- 動態(tài)路由選擇
- 模塊化、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
- 細致的導(dǎo)航控制
- 自動激活 CSS 類的鏈接
- HTML5 history 模式或 hash 模式
- 可定制的滾動行為
- URL 的正確編碼
二、路由的使用
1、路由的安裝
npm install vue-router@4
2、路由的模式
- createWebHashHistory()：Hash模式
- 它在內(nèi)部傳遞的實際URL之前使用了一個哈希字符#，如 https://example.com/#/user/id
- 由于這部分 URL 從未被發(fā)送到服務(wù)器，所以它不需要在服務(wù)器層面上進行任何特殊處理
- createWebHistory()：history模式，推薦使用
- 當(dāng)使用這種歷史模式時，URL會看起來很“正?！保?https://example.com/user/id
- 由于我們的應(yīng)用是一個單頁的客戶端應(yīng)用，如果沒有適當(dāng)?shù)姆?wù)器配置，用戶在瀏覽器中直接訪問https://example.com/user/id，就會得到一個404錯誤；要解決這個問題，你需要做的就是在你的服務(wù)器上添加一個簡單的回退路由，如果URL不匹配任何靜態(tài)資源，它應(yīng)提供與你的應(yīng)用程序中的index.html相同的頁面
3、創(chuàng)建路由模塊
- 在項目中的src文件夾中創(chuàng)建一個router文件夾，在其中創(chuàng)建index.js模塊
- 采用createRouter()創(chuàng)建路由，并暴露出去
- 在main.js文件中初始化路由模塊app.use(router)
// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'
// 創(chuàng)建路由規(guī)則
let routes = [
{
path: '/', // URL 地址
name: 'home', // 名稱
component: HomeView // 渲染該組件
},
]
// 創(chuàng)建路由
const router = createRouter({
// 使用 history 模式
history: createWebHistory(),
// 路由規(guī)則
routes
})
// 將路由對象暴露出去
export default router
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由模塊
let app = createApp(App)
app.use(router) // 初始化路由插件
app.mount('#app')
4、聲明路由鏈接和占位符
- < router-link>：路由鏈接，to屬性則為點擊此元素，需要切換的路由地址
- < router-view>：路由占位符，路由切換的視圖展示的位置
<template>
<!-- 路由鏈接，點擊是路由地址會切換到屬性 to 的地方 -->
<router-link to="/">首頁</router-link>
|
<router-link to="/blog">博客</router-link>
<hr>
<!-- 路由試圖，路由切換組件的地方 -->
<router-view/>
</template>
三、路由的重定向和別名
在路由規(guī)則中，可采用redirect來重定向另一個地址
// 路徑寫法
const routes = [{ path: '/home', redirect: '/' }]
// 命名寫法
const routes = [{ path: '/home', redirect: { name: 'home' } }]
]
別名表示訪問url時自由命名，不受約束，router會自動進行別名匹配，就像我們設(shè)置/的別名為/home，相當(dāng)于訪問 /
// alias是別名的key
const routes = [{ path: '/', component: HomeView, alias: '/home' }]
四、嵌套路由
如果在路由視圖中展示的組件中包含自己的路由占位符，則此處會用到嵌套路由
如圖所示：點擊關(guān)于鏈接，則會顯示About組件，在其組件中又包含了路由鏈接和路由占位符
嵌套路由規(guī)則
- 在某一個路由規(guī)則中采用children來聲明嵌套路由的規(guī)則
- 嵌套路由規(guī)則中的path不能以/開頭，訪問需使用/father/son的形式
// router/index.js
{
path: '/father',
name: 'father',
component: () => import('@/views/father.vue'),
// 嵌套路由
children: [
{
path: 'son', // path 前面不要加 /
name: 'son',
component: () => import('@/views/son.vue')
},
]
}
// father.vue 頁面
<template>
<div class="school">
我是 father 頁面：
<router-link to="/father/son">子頁面</router-link>
<hr>
<!-- 該組件中自己的路由視圖 -->
<router-view />
</div>
</template>
五、聲明式和編程式導(dǎo)航
| 聲明式 | 編程式 | 描述 |
|---|---|---|
| < router-link :to=“…”> | router.push(…) | 會向history棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，會回到之前的URL |
1、聲明式導(dǎo)航
- 很多時候，我們需要將給定匹配模式的路由映射到同一個組件，例如：想渲染不同博客的內(nèi)容，其>實只是渲染到同一個組件上，只是博客的編號不同而已
- 在Vue Router中，可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為“路徑參數(shù)” ，語法如：path: ‘/url/:param’
- 在展示的組件中訪問路徑參數(shù)
3.1. 在選項式 APIJS中采用this. r o u t e . p a r a m s 來訪問，試圖模板上采用 route.params來訪問，試圖模板上采用 route.params來訪問，試圖模板上采用route.params來訪問
3.2. 在組合式 API 中，需要import { useRoute } from ‘vue-router’，JS和視圖模板上通過useRoute().params來訪問
3.3. 還可以通過在路由規(guī)則上添加props: true，將路由參數(shù)傳遞給組件的props中
// router/index.js
{
path: '/father',
name: 'father',
component: () => import('@/views/father.vue'),
// 嵌套路由
children: [
{
path: 'son/:id', // path 前面不要加 / （路徑傳參）
name: 'son',
component: () => import('@/views/son.vue'),
props: true // 將路徑參數(shù)傳遞到展示組件的 props 中
},
]
}
// father.vue
<template>
<div class="school">
我是 father 頁面：
<router-link to="/father/son">子頁面</router-link>
<hr>
<!-- 該組件中自己的路由視圖 -->
<router-view />
</div>
</template>
// son.vue 選項式
<script>
export default {
// 通過 props 來接收路徑參數(shù)
props: { id: String },
methods: {
showRouteParams() {
// 通過 `this.$route.params` 獲取路徑參數(shù)
console.log(this.$route.params)
// 取出指定的路徑參數(shù)
console.log(this.$route.params.id)
// 輸出 props 中得到的路徑參數(shù)
console.log("輸出 props 中得到的路徑參數(shù)：" + this.id)
}
}
}
</script>
<template>
<div class="math">
我是 BlogContent 頁面
<ul>
<li>通過 `this.$route.params` 獲取路徑參數(shù) -- {{ $route.params }}</li>
<li>取出指定的路徑參數(shù) -- {{ $route.params.id }}</li>
<li>輸出 props 中得到的路徑參數(shù) id -- {{ id }}</li>
</ul>
<button @click="showRouteParams">在 JS 中訪問路徑參數(shù)</button>
</div>
</template>
// son.vue 組合式
<script setup>
import { useRoute } from 'vue-router'
// 通過 props 來接收路徑參數(shù)
let propsData = defineProps({ id: String })
// 獲取路由跳轉(zhuǎn)對象
let route = useRoute()
function showRouteParams() {
console.log(route.params) // 通過 `route` 獲取路徑參數(shù)
console.log(route.params.id) // 取出指定的路徑參數(shù)
console.log("輸出 props 中得到的路徑參數(shù)：" + propsData.id)
}
</script>
<template>
<div class="math">
我是 BlogContent 頁面
<ul>
<li>通過 `route` 獲取路徑參數(shù) -- {{ route.params }}</li>
<li>取出指定的路徑參數(shù)：{{ route.params.id }}</li>
<li>輸出 props 中得到的路徑參數(shù) id -- {{ id }}</li>
</ul>
<button @click="showRouteParams">在 JS 中訪問路徑參數(shù)</button>
</div>
</template>
2、編程式導(dǎo)航
提示：
編程式的router.push(…)的語法
- 其的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象
- 如果參數(shù)是描述地址的對象的話，其對象中path和params不能同時使用
// 編程式導(dǎo)航
const username = 'eduardo'
// 我們可以手動建立 url，但我們必須自己處理編碼
router.push(`/user/${username}`) // -> /user/eduardo
// 同樣
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的話，使用 `name` 和 `params` 從自動 URL 編碼中獲益（params名必須和 router規(guī)則中的名一致）
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
3、替換當(dāng)前位置
| 聲明式 | 編程式 | 描述 |
|---|---|---|
| < router-link :to=“…” replace> | router.replace(…) | 它的作用類似于router.push(…)，唯一不同的是，它在導(dǎo)航時不會向history添加新記錄，正如它的名字所暗示的那樣，它取代了當(dāng)前的條目 |
提示：
也可以直接在傳遞給router.push的routeLocation中增加一個屬性replace: true
router.push({ path: '/home', replace: true })
// 相當(dāng)于
router.replace({ path: '/home' })
4、路由歷史
router.go(n) 該方法采用一個整數(shù)作為參數(shù)，表示在歷史堆棧中前進或后退多少步，類似于 window.history.go(n)
// 向前移動一條記錄，與 router.forward() 相同
router.go(1)
// 返回一條記錄，與 router.back() 相同
router.go(-1)
// 前進 3 條記錄
router.go(3)
// 如果沒有那么多記錄，靜默失敗
router.go(-100)
router.go(100)
總結(jié)：
歡迎大家加入我的社區(qū)，在社區(qū)中會不定時發(fā)布一些精選內(nèi)容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003文章來源：http://www.zghlxwxcb.cn/news/detail-787898.html
以上就是 Vue3 中路由Vue Router 的使用，不懂得也可以在評論區(qū)里問我或私聊我詢問，以后會持續(xù)發(fā)布一些新的功能，敬請關(guān)注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog文章來源地址http://www.zghlxwxcb.cn/news/detail-787898.html
到了這里，關(guān)于Vue3 中路由Vue Router 的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
