服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 10分钟彻底搞懂微信小程序单页面应用路由

10分钟彻底搞懂微信小程序单页面应用路由

2022-02-15 20:37百度智能小程序技术 js教程

这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

单页面应用特征

「假设：」 在一个 web 页面中，有1个按钮，点击可跳转到站内其他页面。

「多页面应用：」 点击按钮，会从新加载一个html资源，刷新整个页面；

「单页面应用：」 点击按钮，没有新的html请求，只发生局部刷新，能营造出一种接近原生的体验，如丝般顺滑。

SPA 单页面应用为什么可以几乎无刷新呢？因为它的SP——single-page。在第一次进入应用时，即返回了唯一的html页面和它的公共静态资源，后续的所谓“跳转”，都不再从服务端拿html文件，只是DOM的替换操作，是模（jia）拟（zhuang）的。

那么js又是怎么捕捉到组件切换的时机，并且无刷新变更浏览器url呢？靠hash和HTML5History。

hash 路由

特征

  • 类似www.xiaoming.html#bar 就是哈希路由，当 # 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行DOM操作来模拟页面跳转
  • 不需要服务端配合
  • 对 SEO 不友好

原理

10分钟彻底搞懂微信小程序单页面应用路由

hash

HTML5History 路由

特征

  1. History 模式是 HTML5 新推出的功能，比之 hash 路由的方式直观，长成类似这个样子www.xiaoming.html/bar ，模拟页面跳转是通过 history.pushState(state, title, url) 来更新浏览器路由，路由变化时监听 popstate 事件来操作DOM
  2. 需要后端配合，进行重定向
  3. 对 SEO 相对友好
  4.  

原理

10分钟彻底搞懂微信小程序单页面应用路由

HTML5History

vue-router 源码解读

以 Vue 的路由vue-router为例，我们一起来撸一把它的源码。

Tips：因为，本篇的重点在于讲解单页面路由的两种模式，所以，下面只列举了一些关键代码，主要讲解：

  1. 注册插件
  2. VueRouter的构造函数，区分路由模式
  3. 全局注册组件
  4. hash / HTML5History模式的 push 和监听方法
  5. transitionTo 方法

注册插件

首先，作为一个插件，要有暴露一个install方法的自觉，给Vue爸爸去 use。

源码的install.js文件中，定义了注册安装插件的方法install，给每个组件的钩子函数混入方法，并在beforeCreate钩子执行时初始化路由：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.mixin({
 beforeCreate () {
 if (isDef(this.$options.router)) {
 this._routerRoot = this
 this._router = this.$options.router
 this._router.init(this)
 Vue.util.defineReactive(this, '_route', this._router.history.current)
 } else {
 this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
 }
 registerInstance(this, this)
 },
 // 全文中以...来表示省略的方法
 ...
});

区分mode

然后，我们从index.js找到整个插件的基类 VueRouter，不难看出，它是在constructor中，根据不同mode 采用不同路由实例的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
...
import {install} from './install';
import {HashHistory} from './history/hash';
import {HTML5History} from './history/html5';
...
export default class VueRouter {
 static install: () => void;
 constructor (options: RouterOptions = {}) {
 if (this.fallback) {
 mode = 'hash'
 }
 if (!inBrowser) {
 mode = 'abstract'
 }
 this.mode = mode
  
 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}`)
 }
 }
 }
}

全局注册router-link组件

这个时候，我们也许会问：使用 vue-router 时， 常见的<router-link/>、 <router-view/>又是在哪里引入的呢？

回到install.js文件，它引入并全局注册了 router-view、router-link组件：

?
1
2
3
4
5
import View from './components/view';
import Link from './components/link';
...
Vue.component('RouterView', View);
Vue.component('RouterLink', Link);

在 ./components/link.js 中，<router-link/>组件上默认绑定了click事件，点击触发handler方法进行相应的路由操作。

?
1
2
3
4
5
6
7
8
9
const handler = e => {
 if (guardEvent(e)) {
 if (this.replace) {
 router.replace(location, noop)
 } else {
 router.push(location, noop)
 }
 }
};

就像最开始提到的，VueRouter构造函数中对不同mode初始化了不同模式的 History 实例，因而router.replace、router.push的方式也不尽相同。接下来，我们分别扒拉下这两个模式的源码。

hash模式

history/hash.js 文件中，定义了HashHistory 类，这货继承自 history/base.js 的 History 基类。
它的prototype上定义了push方法：在支持 HTML5History 模式的浏览器环境中（supportsPushState为 true），调用history.pushState来改变浏览器地址；其他浏览器环境中，则会直接用location.hash = path 来替换成新的 hash 地址。

其实，最开始读到这里是有些疑问的，既然已经是 hash 模式为何还要判断supportsPushState？原来，是为了支持scrollBehavior，history.pushState可以传参key过去，这样每个url历史都有一个key，用 key 保存了每个路由的位置信息。

同时，原型上绑定的setupListeners 方法，负责监听 hash 变更的时机：在支持 HTML5History 模式的浏览器环境中，监听popstate事件；而其他浏览器中，则监听hashchange。监听到变化后，触发handleRoutingEvent 方法，调用父类的transitionTo跳转逻辑，进行 DOM 的替换操作。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { pushState, replaceState, supportsPushState } from '../util/push-state'
...
export class HashHistory extends History {
 setupListeners () {
 ...
 const handleRoutingEvent = () => {
 const current = this.current
 if (!ensureSlash()) {
  return
 }
 // transitionTo调用的父类History下的跳转方法，跳转后路径会进行hash化
 this.transitionTo(getHash(), route => {
  if (supportsScroll) {
  handleScroll(this.router, route, current, true)
  }
  if (!supportsPushState) {
  replaceHash(route.fullPath)
  }
 })
 }
 const eventType = supportsPushState ? 'popstate' : 'hashchange'
 window.addEventListener(
 eventType,
 handleRoutingEvent
 )
 this.listeners.push(() => {
 window.removeEventListener(eventType, handleRoutingEvent)
 })
 }
 
 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
 const { current: fromRoute } = this
 this.transitionTo(
 location,
 route => {
 pushHash(route.fullPath)
 handleScroll(this.router, route, fromRoute, false)
 onComplete && onComplete(route)
 },
 onAbort
 )
 }
}
...
 
// 处理传入path成hash形式的URL
function getUrl (path) {
 const href = window.location.href
 const i = href.indexOf('#')
 const base = i >= 0 ? href.slice(0, i) : href
 return `${base}#${path}`
}
...
 
// 替换hash
function pushHash (path) {
 if (supportsPushState) {
 pushState(getUrl(path))
 } else {
 window.location.hash = path
 }
}
 
// util/push-state.js文件中的方法
export const supportsPushState =
 inBrowser &&
 (function () {
 const ua = window.navigator.userAgent
 
 if (
 (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
 ua.indexOf('Mobile Safari') !== -1 &&
 ua.indexOf('Chrome') === -1 &&
 ua.indexOf('Windows Phone') === -1
 ) {
 return false
 }
 return window.history && typeof window.history.pushState === 'function'
 })()

HTML5History模式

类似的，HTML5History 类定义在 history/html5.js 中。

定义push原型方法，调用history.pusheState修改浏览器的路径。

与此同时，原型setupListeners 方法对popstate进行了事件监听，适时做 DOM 替换。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import {pushState, replaceState, supportsPushState} from '../util/push-state';
...
export class HTML5History extends History {
 
 setupListeners () {
 
 const handleRoutingEvent = () => {
 const current = this.current;
 const location = getLocation(this.base);
 if (this.current === START && location === this._startLocation) {
 return
 }
 
 this.transitionTo(location, route => {
 if (supportsScroll) {
 handleScroll(router, route, current, true)
 }
 })
 }
 window.addEventListener('popstate', handleRoutingEvent)
 this.listeners.push(() => {
 window.removeEventListener('popstate', handleRoutingEvent)
 })
 }
 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
 const { current: fromRoute } = this
 this.transitionTo(location, route => {
 pushState(cleanPath(this.base + route.fullPath))
 handleScroll(this.router, route, fromRoute, false)
 onComplete && onComplete(route)
 }, onAbort)
 }
}
 
...
 
// util/push-state.js文件中的方法
export function pushState (url?: string, replace?: boolean) {
 saveScrollPosition()
 const history = window.history
 try {
 if (replace) {
 const stateCopy = extend({}, history.state)
 stateCopy.key = getStateKey()
 history.replaceState(stateCopy, '', url)
 } else {
 history.pushState({ key: setStateKey(genStateKey()) }, '', url)
 }
 } catch (e) {
 window.location[replace ? 'replace' : 'assign'](url)
 }
}

transitionTo 处理路由变更逻辑

上面提到的两种路由模式，都在监听时触发了this.transitionTo，这到底是个啥呢？它其实是定义在 history/base.js 基类上的原型方法，用来处理路由的变更逻辑。

先通过const route = this.router.match(location, this.current)对传入的值与当前值进行对比，返回相应的路由对象；接着判断新路由是否与当前路由相同，相同的话直接返回；不相同，则在this.confirmTransition中执行回调更新路由对象，并对视图相关DOM进行替换操作。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export class History {
 ...
 transitionTo (
 location: RawLocation,
 onComplete?: Function,
 onAbort?: Function
 ) {
 const route = this.router.match(location, this.current)
 this.confirmTransition(
 route,
 () => {
 const prev = this.current
 this.updateRoute(route)
 onComplete && onComplete(route)
 this.ensureURL()
 this.router.afterHooks.forEach(hook => {
  hook && hook(route, prev)
 })
 
 if (!this.ready) {
  this.ready = true
  this.readyCbs.forEach(cb => {
  cb(route)
  })
 }
 },
 err => {
 if (onAbort) {
  onAbort(err)
 }
 if (err && !this.ready) {
  this.ready = true
  // https://github.com/vuejs/vue-router/issues/3225
  if (!isRouterError(err, NavigationFailureType.redirected)) {
  this.readyErrorCbs.forEach(cb => {
  cb(err)
  })
  } else {
  this.readyCbs.forEach(cb => {
  cb(route)
  })
  }
 }
 }
 )
 }
 ...
}

最后

好啦，以上就是单页面路由的一些小知识，希望我们能一起从入门到永不放弃~~

到此这篇关于10分钟彻底搞懂微信小程序单页面应用路由的文章就介绍到这了,更多相关小程序单页面应用路由内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://juejin.cn/post/6855129006552514568

  • 微信小程序
  • 路由
  • 单页面

    • 延伸 · 阅读

    精彩推荐
    • js教程js面向对象方式实现拖拽效果

      js面向对象方式实现拖拽效果

      这篇文章主要为大家详细介绍了js面向对象方式实现拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      web前端的清流7312022-01-25
    • js教程JavaScript实现滑块验证解锁

      JavaScript实现滑块验证解锁

      这篇文章主要为大家详细介绍了JavaScript实现滑块验证解锁，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      努力的黑皮4772021-12-27
    • js教程Nest.js散列与加密实例详解

      Nest.js散列与加密实例详解

      这篇文章主要给大家介绍了关于Nest.js散列与加密的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的...

      淮城一只猫11052022-01-22
    • js教程js实现简单图片拖拽效果

      js实现简单图片拖拽效果

      这篇文章主要为大家详细介绍了js实现简单图片拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      qq_448013368902022-01-22
    • js教程详解Typescript里的This的使用方法

      详解Typescript里的This的使用方法

      这篇文章主要介绍了详解Typescript里的This的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们...

      hardfist7402021-12-28
    • js教程10分钟彻底搞懂微信小程序单页面应用路由

      10分钟彻底搞懂微信小程序单页面应用路由

      这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价...

      百度智能小程序技术6332022-02-15
    • js教程一篇文章看懂JavaScript中的回调

      一篇文章看懂JavaScript中的回调

      这篇文章主要给大家介绍了如何通过一篇文章看懂JavaScript中的回调，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，...

      疯狂的技术宅4842021-12-27
    • js教程基于JavaScript实现轮播图效果

      基于JavaScript实现轮播图效果

      这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      努力学习中.....5712021-12-24
    最近更新
    编辑推荐
    阅读排行
    热门标签
    wxss 　 文字时钟 　 Object.assign 　 removeAttribute 　 attachEvent 　 并发请求控制 　 选择图片 　 电灯开关 　 随机图形 　 点击切换 　 防止重复 　 规则集 　 arcgis.js 　 关闭广告 　 Nest.js 　 SSG 　 onShareTimeline 　 点餐程序 　 胶囊 　 mustache.js 　 元件 　 悬浮图标 　 按钮角标 　 鼠标拖曳 　 AutoJs 　 Strve.js 　 蒙板 　 mapboxgl 　 轨迹线 　 多层次 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图