您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue3路由hash與History怎么設(shè)置”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
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ā)模式,即用戶在輸入一個(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: [...] })
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)的模式,也稱作錨點(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路由被稱為是前端路由,已經(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 } },
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ě)法:
安裝 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>
安裝 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>
“vue3路由hash與History怎么設(shè)置”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。