vue3路由hash與History怎么設置

本篇內容介紹了“vue3路由hash與History怎么設置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

vue3路由hash與History的設置

1、history 關鍵字：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對象，它表示當前窗口的瀏覽歷史，history對象保存了當前窗口訪問過的所有頁面網址。URL中沒有#，它使用的是傳統的路由分發模式，即用戶在輸入一個URL時，服務器會接收這個請求，并解析這個URL，然后做出相應的邏輯處理。

特點：

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

雖然history模式不需要#。但是，它也有自己的缺點，就是在刷新頁面的時候，如果沒有相應的路由或資源，就會刷出404來。

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

修改歷史狀態：

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

切換歷史狀態：

包括forward()、back()、go()三個方法，對應瀏覽器的前進，后退，跳轉操作。

配置：

想要設置成history模式，就要進行以下的配置（后端也要進行配置）：

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

2、hash 關鍵字：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模式是開發中默認的模式，也稱作錨點，它的URL帶著一個#，例如：www.abc.com/#/vue，它的hash值就是#/vue。

特點：

hash值會出現在URL里面，但是不會出現在HTTP請求中，對后端沒有影響。所以改變hash值不會重新加載頁面。

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

hash路由被稱為是前端路由，已經成為SPA（單頁面應用）的標配。

原理：

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

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

使用onhashchange()事件的好處就是，在頁面的hash值發生變化時，無需向后端發起請求，window就可以監聽事件的改變，并按規則加載相應的代碼。

除此之外，hash值變化對應的URL都會被瀏覽器記錄下來，這樣瀏覽器就能實現頁面的前進和后退。雖然是沒有請求后端服務器，但是頁面的hash值和對應的URL關聯起來了。

獲取頁面hash變化的方法：

// 監聽,當路由發生變化的時候執行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度觀察監聽
    deep: true
  }
},

vue2和vue3中路由的區別和寫法

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

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

vue3中使用 Vue Router

安裝 Vue Router：在終端中執行以下命令進行安裝：

npm install vue-router

引入 Vue Router 并配置路由：在 main.js 中引入 Vue Router，并配置路由規則和組件對應關系。

示例代碼如下：

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 // 等價于 routes: routes
})
 
newVue({
  el: '#app',
  router,
  render: h =>h(App)
})

在模板中使用路由：在模板中使用 router-link 組件來實現路由跳轉，router-view 組件用于顯示對應的組件內容。

示例代碼如下：

<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：在終端中執行以下命令進行安裝：

npm install vue-router@4

引入 Vue Router Next 并配置路由：在 main.js 中引入 Vue Router Next，并配置路由規則和組件對應關系。

示例代碼如下：

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 組件來實現路由跳轉，router-view 組件用于顯示對應的組件內容。示例代碼如下：

<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怎么設置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！