vue项目地址上的#是哪来的？（前端路由的hash模式和history模式）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue项目地址上的#是哪来的？（前端路由的hash模式和history模式），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含14437字，纯文字阅读大概需要21分钟。
内容图文
效果：
原因：这是因为vue是单页面应用的原因，在前进或后退的时候使用这种方式将保持路径的正确性，#是vue的hash模式，这是一种默认的方式。此时router/index.js文件是这样的：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
export default router
如果想去掉这个#，可以将hash模式改成history模式（默认为hash模式），即在index.js中加上mode: “history”,如下图：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes,
mode: 'history'
})
export default router
效果如下：
用Hash模式来实现简易路由：
首先定义四个a链接，每个a链接对应一个hash值.再定义一个component标签来展示对应的组件
当点击每个a链接，改变地址栏中的url的hash值，当hash值变化，我们期望在主体区展示对应的组件。但是如何才能监听到hash值的变化呢？就要用到一个事件，叫window.onhashchange事件，通过hash值的变化就自动触发这个事件，在事件中就能通过location.hash拿到最新的hash值，然后做switchcase判断，从而决定在主体区域去渲染什么样的组件。
后端路由---->Ajax前端渲染---->SPA(前端路由)的演变过程：
在早期web开发中，绝大多数网站都采用后端路由的形式来渲染每一个网页，
后端路由指的是url请求地址与服务器资源之间的对应关系。后端路由的渲染方式是后端渲染，这样渲染方式是有性能问题的。后端渲染存在性能问题，假设用户与服务器之间经常要提交表单这样的数据交互行为，后端路由就会造成网页的频繁刷新，体验非常的差，因此就出现了Ajax技术，实现前端页面的局部刷新，很大程度上提高用户体验，但是单纯的Ajax技术并不支持浏览器的前进后退这些历史操作，也就是说浏览器没有办法保存用户在网页上的浏览状态的，因此前端又出现了SPA单页面程序开发技术，所谓的SPA指的是整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时SPA还支持浏览器地址栏的前进和后退操作。如何才能实现SPA呢？SPA最核心的技术是前端路由，前端路由的本质是用户事件与事件处理函数之间的对应关系。通过前端路由，可以提高用户的操作体验，同时也能让网页打开速度更快。
SPA的优缺点：
SPA的优点：1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作，故是客户端渲染。2、适合前后端分离开发；
SPA的缺点：1、首页加载慢，SPA会将js、CSS打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，所以门户不采用单页面应用。
2、SEO不友好，故门户、课程介绍不采用单页面应用，而管理系统采用单页面应用。
哈希路由（hash模式）和历史路由（history模式）源码解析：
随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高，单页应用（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：
1、利用URL中的hash（“#”）
2、利用History interface在 HTML5中新增的方法
模式参数
在vue-router中是通过mode这一参数控制路由的实现模式的：
const router = new VueRouter({
mode: 'history',
routes: [...]
})
源码：
export default class VueRouter {
mode: string; // 传入的字符串参数，指示history类别
history: HashHistory | HTML5History | AbstractHistory; // 实际起作用的对象属性，必须是以上三个类的枚举
fallback: boolean; // 如浏览器不支持，'history'模式需回滚为'hash'模式
constructor (options: RouterOptions = {}) {
let mode = options.mode || 'hash' // 默认为'hash'模式
this.fallback = mode === 'history' && !supportsPushState // 通过supportsPushState判断浏览器是否支持'history'模式
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract' // 不在浏览器环境下运行需强制为'abstract'模式
}
this.mode = mode
// 根据mode确定history实际的类并实例化
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
}
init (app: any /* Vue component instance */) {
const history = this.history
// 根据history的类别执行相应的初始化操作和监听
if (history instanceof HTML5History) {
history.transitionTo(history.getCurrentLocation())
} else if (history instanceof HashHistory) {
const setupHashListener = () => {
history.setupListeners()
}
history.transitionTo(
history.getCurrentLocation(),
setupHashListener,
setupHashListener
)
}
history.listen(route => {
this.apps.forEach((app) => {
app._route = route
})
})
}
// VueRouter类暴露的以下方法实际是调用具体history对象的方法
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.history.push(location, onComplete, onAbort)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.history.replace(location, onComplete, onAbort)
}
}
1、作为参数传入的字符串属性mode只是一个标记，用来指示实际起作用的对象属性history的实现类，两者对应关系如下：
'history'：HTML5History
'hash'：HashHistory
'abstract'：AbstractHistory
2、在初始化对应的history之前，会对mode做一些校验：若浏览器不支持HTML5History方式（通过supportsPushState变量判断），则mode强制设为'hash'；若不是在浏览器环境下运行，则mode强制设为'abstract'
在浏览器环境下的两种方式，分别就是在HTML5History，HashHistory两个类中实现的。
hash（“#”）符号的本来作用是加在URL中指示网页中的位置：
http://www.example.com/index.html#print
#符号后面的字符称之为hash。
export function getHash (): string {
// 因为兼容性问题 这里没有直接使用 window.location.hash
// 因为 Firefox decode hash 值
const href = window.location.href
const index = href.indexOf('#')
// 如果此时没有 # 则返回 ''
// 否则 取得 # 后的所有内容
return index === -1 ? '' : href.slice(index + 1)
}
hash值以斜杠（slash）开头：
// 保证 hash 以 / 开头
function ensureSlash (): boolean {
// 得到 hash 值
const path = getHash()
// 如果说是以 / 开头的 直接返回即可
if (path.charAt(0) === '/') {
return true
}
// 不是的话 需要手工保证一次 替换 hash 值
replaceHash('/' + path)
return false
}
获取不带base的location。
// 得到 不带 base 值的 location
export function getLocation (base: string): string {
let path = window.location.pathname
if (base && path.indexOf(base) === 0) {
path = path.slice(base.length)
}
// 是包含 search 和 hash 的
return (path || '/') + window.location.search + window.location.hash
}
在不带base的location前添加/#,
如果设置的是 history 但是如果浏览器不支持的话 ，强制退回到 hash。如果说此时的地址不是以 /# 开头的，需要做一次降级处理 降级为 hash 模式下应有的 /# 开头
checkFallback () {
// 得到除去 base 的真正的 location 值
const location = getLocation(this.base)
if (!/^\/#/.test(location)) {
// 如果说此时的地址不是以 /# 开头的
// 需要做一次降级处理 降级为 hash 模式下应有的 /# 开头
window.location.replace(
cleanPath(this.base + '/#' + location)
)
return true
}
}
HashHistory
继承History基类：
// 继承 History 基类
export class HashHistory extends History {
constructor (router: VueRouter, base: ?string, fallback: boolean) {
// 调用基类构造器
super(router, base)
// 如果说是从 history 模式降级来的
// 需要做降级检查
if (fallback && this.checkFallback()) {
// 如果降级 且 做了降级处理 则什么也不需要做
return
}
// 保证 hash 是以 / 开头
ensureSlash()
}
可以看到在实例化过程中主要做两件事情：针对于不支持 history api 的降级处理，以及保证默认进入的时候对应的 hash 值是以 / 开头的，如果不是则替换。
友善高级的 HTML5History
HTML5History 则是利用 history.pushState/repaceState API 来完成 URL 跳转而无须重新加载页面，页面地址和正常地址无异；
// ...
import { cleanPath } from '../util/path'
import { History } from './base'
// 记录滚动位置工具函数
import {
saveScrollPosition,
getScrollPosition,
isValidPosition,
normalizePosition,
getElementPosition
} from '../util/scroll-position'
// 生成唯一 key 作为位置相关缓存 key
const genKey = () => String(Date.now())
let _key: string = genKey()
export class HTML5History extends History {
constructor (router: VueRouter, base: ?string) {
// 基类构造函数
super(router, base)
// 定义滚动行为 option
const expectScroll = router.options.scrollBehavior
// 监听 popstate 事件 也就是
// 浏览器历史记录发生改变的时候（点击浏览器前进后退 或者调用 history api ）
window.addEventListener('popstate', e => {
// ...
})
if (expectScroll) {
// 需要记录滚动行为 监听滚动事件 记录位置
window.addEventListener('scroll', () => {
saveScrollPosition(_key)
})
}
}
// ...
}
// ...
可以看到在这种模式下，初始化作的工作相比 hash 模式少了很多，只是调用基类构造函数以及初始化监听事件，不需要再做额外的工作。
history 改变
history 改变可以有两种，一种是用户点击链接元素，一种是更新浏览器本身的前进后退导航来更新。
第一种方式：更新浏览器本身的前进后退导航
先来说浏览器导航发生变化的时候会触发对应的事件：对于 hash 模式而言触发 window 的 hashchange 事件，对于 history 模式而言则触发 window 的 popstate 事件。
hash模式
onHashChange () {
// 不是 / 开头
if (!ensureSlash()) {
return
}
// 调用 transitionTo
this.transitionTo(getHash(), route => {
// 替换 hash
replaceHash(route.fullPath)
})
}
replaceHash()方法直接调用 replace 强制替换 以避免产生“多余”的历史记录，其实就是更新浏览器的 hash 值，push 和 replace 的场景下都是一个效果。
function replaceHash (path) {
const i = window.location.href.indexOf('#')
// 直接调用 replace 强制替换 以避免产生“多余”的历史记录
// 主要是用户初次跳入 且hash值不是以 / 开头的时候直接替换
// 其余时候和push没啥区别 浏览器总是记录hash记录
window.location.replace(
window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
)
}
transitionTo 方法的功能是路由跳转，它接收三个参数：1. location：要转向的路由地址。2. onComplete：完成后的回调。3. onAbort：取消时的回调
// 确认过渡
confirmTransition (route: Route, cb: Function) {
const current = this.current // 当前路由
// 如果是相同 直接返回
if (isSameRoute(route, current)) { // 如果目标路由route与当前路由相同，取消跳转
this.ensureURL()
return
}
const {
deactivated,
activated
} = resolveQueue(this.current.matched, route.matched)
// 整个切换周期的队列
const queue: Array<?NavigationGuard> = [].concat(
// leave 的钩子
extractLeaveGuards(deactivated),
// 全局 router before hooks
this.router.beforeHooks,
// 将要更新的路由的 beforeEnter 钩子
activated.map(m => m.beforeEnter),
// 异步组件
resolveAsyncComponents(activated)
)
this.pending = route
// 每一个队列执行的 iterator 函数
const iterator = (hook: NavigationGuard, next) => {
// ...
}
// 执行队列 leave 和 beforeEnter 相关钩子
runQueue(queue, iterator, () => {
//...
})
}
history模式
window.addEventListener('popstate', e => {
// 取得 state 中保存的 key
_key = e.state && e.state.key
// 保存当前的先
const current = this.current
// 调用 transitionTo
this.transitionTo(getLocation(this.base), next => {
if (expectScroll) {
// 处理滚动
this.handleScroll(next, current, true)
}
})
})
第二种方式：点击链接交互
即点击了 <router-link>，回顾下这个组件在渲染的时候做的事情：
// ...
render (h: Function) {
// ...
// 事件绑定
const on = {
click: (e) => {
// 忽略带有功能键的点击
if (e.metaKey || e.ctrlKey || e.shiftKey) return
// 已阻止的返回
if (e.defaultPrevented) return
// 右击
if (e.button !== 0) return
// `target="_blank"` 忽略
const target = e.target.getAttribute('target')
if (/\b_blank\b/i.test(target)) return
// 阻止默认行为 防止跳转
e.preventDefault()
if (this.replace) {
// replace 逻辑
router.replace(to)
} else {
// push 逻辑
router.push(to)
}
}
}
// 创建元素需要附加的数据们
const data: any = {
class: classes
}
if (this.tag === 'a') {
data.on = on
data.attrs = { href }
} else {
// 找到第一个 <a> 给予这个元素事件绑定和href属性
const a = findAnchor(this.$slots.default)
if (a) {
// in case the <a> is a static node
a.isStatic = false
const extend = _Vue.util.extend
const aData = a.data = extend({}, a.data)
aData.on = on
const aAttrs = a.data.attrs = extend({}, a.data.attrs)
aAttrs.href = href
} else {
// 没有 <a> 的话就给当前元素自身绑定时间
data.on = on
}
}
// 创建元素
return h(this.tag, data, this.$slots.default)
}
// ...
这里一个关键就是绑定了元素的 click 事件，当用户触发后，会调用 router 的 push 或 replace 方法来更新路由。下边就来看看这两个方法定义，
push (location: RawLocation) {
this.history.push(location)
}
replace (location: RawLocation) {
this.history.replace(location)
}
HashHistory
// ...
push (location: RawLocation) {
// 调用 transitionTo
this.transitionTo(location, route => {
// ...
})
}
replace (location: RawLocation) {
// 调用 transitionTo
this.transitionTo(location, route => {
// ...
})
}
// ...
操作是类似的，主要就是调用基类的 transitionTo 方法来过渡这次历史的变化，在完成后更新当前浏览器的 hash 值。
HashHistory的push方法：
将新路由添加到浏览器访问历史的栈顶
push (location: RawLocation) {
// 调用 transitionTo
this.transitionTo(location, route => {
// 完成后 pushHash
pushHash(route.fullPath)
})
}
function pushHash (path) {
window.location.hash = path
}HashHistory的replace方法：
replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(location, route => {
replaceHash(route.fullPath)
onComplete && onComplete(route)
}, onAbort)
}
function replaceHash (path) {
const i = window.location.href.indexOf('#')
window.location.replace(
window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
)
}
location的replace（）方法可用一个新页面取代当前页面。
其实就是更新浏览器的 hash 值，push 和 replace 的场景下都是一个效果。
transitionTo (location: RawLocation, cb?: Function) {
// 调用 match 得到匹配的 route 对象
const route = this.router.match(location, this.current)
// 确认过渡
this.confirmTransition(route, () => {
// 更新当前 route 对象
this.updateRoute(route)
cb && cb(route)
// 子类实现的更新url地址
// 对于 hash 模式的话 就是更新 hash 的值
// 对于 history 模式的话 就是利用 pushstate / replacestate 来更新
// 浏览器地址
this.ensureURL()
})
}
// 确认过渡
confirmTransition (route: Route, cb: Function) {
const current = this.current
// 如果是相同 直接返回
if (isSameRoute(route, current)) {
this.ensureURL()
return
}
const {
deactivated,
activated
} = resolveQueue(this.current.matched, route.matched)
// 整个切换周期的队列
const queue: Array<?NavigationGuard> = [].concat(
// leave 的钩子
extractLeaveGuards(deactivated),
// 全局 router before hooks
this.router.beforeHooks,
// 将要更新的路由的 beforeEnter 钩子
activated.map(m => m.beforeEnter),
// 异步组件
resolveAsyncComponents(activated)
)
this.pending = route
// 每一个队列执行的 iterator 函数
const iterator = (hook: NavigationGuard, next) => {
// ...
}
// 执行队列 leave 和 beforeEnter 相关钩子
runQueue(queue, iterator, () => {
//...
})
}
回到 confirmTransition 的回调，最后还做了一件事情 ensureURL：
ensureURL (push?: boolean) {
const current = this.current.fullPath
if (getHash() !== current) {
push ? pushHash(current) : replaceHash(current)
}
}
此时 push 为 undefined，所以调用 replaceHash 更新浏览器 hash 值。
内容总结
以上是互联网集市为您收集整理的vue项目地址上的#是哪来的？（前端路由的hash模式和history模式）全部内容，希望文章能够帮你解决vue项目地址上的#是哪来的？（前端路由的hash模式和history模式）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。