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怎么设置”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！