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关联起来了。文章来源:https://www.toymoban.com/news/detail-593530.html
获取页面hash变化的方法:
文章来源地址https://www.toymoban.com/news/detail-593530.html
// 监听,当路由发生变化的时候执行
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
到了这里,关于vue3中路由hash与History的设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!