vue3路由hash與History的設(shè)置

1、history 關(guān)鍵字：createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
const routes = [ {
? path: '/userinfo',
? name: 'UserInfo',
? component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
? history: createWebHistory(process.env.BASE_URL),
? routes
})
export default router

history模式直接指向history對(duì)象，它表示當(dāng)前窗口的瀏覽歷史，history對(duì)象保存了當(dāng)前窗口訪問(wèn)過(guò)的所有頁(yè)面網(wǎng)址。URL中沒(méi)有#，它使用的是傳統(tǒng)的路由分發(fā)模式，即用戶(hù)在輸入一個(gè)URL時(shí)，服務(wù)器會(huì)接收這個(gè)請(qǐng)求，并解析這個(gè)URL，然后做出相應(yīng)的邏輯處理。

特點(diǎn)：

當(dāng)使用history模式時(shí)，URL就像這樣：hhh.com/user/id。相比hash模式更加好看。

雖然history模式不需要#。但是，它也有自己的缺點(diǎn)，就是在刷新頁(yè)面的時(shí)候，如果沒(méi)有相應(yīng)的路由或資源，就會(huì)刷出404來(lái)。

history api可以分為兩大部分，切換歷史狀態(tài) 和 修改歷史狀態(tài)：

修改歷史狀態(tài)：

包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)他們進(jìn)行修改時(shí)，雖然修改了url，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。如果要做到改變url但又不刷新頁(yè)面的效果，就需要前端用上這兩個(gè)API。

切換歷史狀態(tài)：

包括forward()、back()、go()三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)，后退，跳轉(zhuǎn)操作。

配置：

想要設(shè)置成history模式，就要進(jìn)行以下的配置（后端也要進(jìn)行配置）：

const router = new VueRouter({
? mode: 'history',
? routes: [...]
})

2、hash 關(guān)鍵字：createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
? path: '/userinfo',
? name: 'UserInfo',
? component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
? history: createWebHashHistory(),
? routes
})
export default router

hash模式是開(kāi)發(fā)中默認(rèn)的模式，也稱(chēng)作錨點(diǎn)，它的URL帶著一個(gè)#，例如：www.abc.com/#/vue，它的hash值就是#/vue。

特點(diǎn)：

hash值會(huì)出現(xiàn)在URL里面，但是不會(huì)出現(xiàn)在HTTP請(qǐng)求中，對(duì)后端沒(méi)有影響。所以改變hash值不會(huì)重新加載頁(yè)面。

這種模式的瀏覽器支持度很好，低版本的IE瀏覽器也支持這種模式。

hash路由被稱(chēng)為是前端路由，已經(jīng)成為SPA（單頁(yè)面應(yīng)用）的標(biāo)配。

原理：

hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
? ? console.log(event.oldURL, event.newURL);
? ? let hash = location.hash.slice(1);
}

使用onhashchange()事件的好處就是，在頁(yè)面的hash值發(fā)生變化時(shí)，無(wú)需向后端發(fā)起請(qǐng)求，window就可以監(jiān)聽(tīng)事件的改變，并按規(guī)則加載相應(yīng)的代碼。

除此之外，hash值變化對(duì)應(yīng)的URL都會(huì)被瀏覽器記錄下來(lái)，這樣瀏覽器就能實(shí)現(xiàn)頁(yè)面的前進(jìn)和后退。雖然是沒(méi)有請(qǐng)求后端服務(wù)器，但是頁(yè)面的hash值和對(duì)應(yīng)的URL關(guān)聯(lián)起來(lái)了。

獲取頁(yè)面hash變化的方法：

// 監(jiān)聽(tīng),當(dāng)路由發(fā)生變化的時(shí)候執(zhí)行
watch: {
? $route: {
? ? handler: function(val, oldVal){
? ? ? console.log(val);
? ? },
? ? // 深度觀察監(jiān)聽(tīng)
? ? deep: true
? }
},

vue2和vue3中路由的區(qū)別和寫(xiě)法

Vue 2 和 Vue 3 中路由的主要區(qū)別在于使用的路由庫(kù)不同。在 Vue 2 中，通常使用 Vue Router 作為路由庫(kù)；而在 Vue 3 中，Vue Router 仍然是官方推薦的路由庫(kù)，但也可以選擇使用新的路由庫(kù) - Vue Router Next。

下面分別介紹在 Vue 2 和 Vue 3 中使用 Vue Router 的路由寫(xiě)法：

vue3中使用 Vue Router

安裝 Vue Router：在終端中執(zhí)行以下命令進(jìn)行安裝：

npm install vue-router

引入 Vue Router 并配置路由：在 main.js 中引入 Vue Router，并配置路由規(guī)則和組件對(duì)應(yīng)關(guān)系。

示例代碼如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
?
Vue.use(VueRouter)
?
const routes = [
? { path: '/', component: Home },
? { path: '/about', component: About }
]
?
const router = newVueRouter({
? routes // 等價(jià)于 routes: routes
})
?
newVue({
? el: '#app',
? router,
? render: h =>h(App)
})

在模板中使用路由：在模板中使用 router-link 組件來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)，router-view 組件用于顯示對(duì)應(yīng)的組件內(nèi)容。

示例代碼如下：

<template>
? ? <div id="app">
? ? ? ? <nav>
? ? ? ? ? ? <router-link to="/">Home</router-link>
? ? ? ? ? ? <router-link to="/about">About</router-link>
? ? ? ? </nav>
? ? ? ? <router-view></router-view>
? ? </div>
</template>

vue3中使用 Vue Router Next

安裝 Vue Router Next：在終端中執(zhí)行以下命令進(jìn)行安裝：

npm install vue-router@4

引入 Vue Router Next 并配置路由：在 main.js 中引入 Vue Router Next，并配置路由規(guī)則和組件對(duì)應(yīng)關(guān)系。

示例代碼如下：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import App from './App.vue'
const routes = [
? { path: '/', component: Home },
? { path: '/about', component: About }
]
?
const router = createRouter({
? history: createWebHistory(),
? routes
})
?
const app = createApp(App)
app.use(router)
app.mount('#app')

在模板中使用路由：在模板中使用 router-link 組件來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)，router-view 組件用于顯示對(duì)應(yīng)的組件內(nèi)容。示例代碼如下：

<template>
? ? <div id="app">
? ? ? ? <nav>
? ? ? ? ? ? <router-link to="/">Home</router-link>
? ? ? ? ? ? <router-link to="/about">About</router-link>
? ? ? ? </nav>
? ? ? ? <router-view></router-view>
? ? </div>
</template>

心得：

總體來(lái)說(shuō)，在使用 Vue Router 方面，Vue 2 和 Vue 3 的寫(xiě)法類(lèi)似，但是在具體細(xì)節(jié)上還是有所差異。如果需要更深入地了解 Vue Router 的使用方法和技巧，建議參考官方文檔或相關(guān)教程。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論