vue 两种路由模式具体实现

背景

目前spa单页面，前后端分离模式正在流行中，很多项目中都采用的单页面模式。

• 单页面
  众多周知，我们前端在开发的时候，一般将一个index.html 页面放在后端。这个 index.html即我们访问的单页面。我们在首次访问时直接访问后端部署的index.html路径即可。在请求到这个index.html页面后，后续切换页面展示内容不需要再次请求，这正是由于路由的作用。
• 路由
  通过某种方式，监听用户动作行为，进而展示不同的内容
• 两种路由
  众所周知，前端现在流行两种路由模式，history和hash模式

hash模式

切换时会改变URL中后面的hash部分 即 ** # 后面部分**

• 原理
  不同路由对应的hash值不一样，在改变hash值时并不会重新发送请求。

• 实现原理
  根据浏览器提供的hashchange方法，监听不同hashchange进而引入不同的内容显示

• 具体实现

    
    
    
    
    
    
    
    



    

        首页
        商品
        我的
    
    






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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

• 特点
  1 只需在前端操作 无需后端辅助
  2 使用hashchange监听，渲染不同页面
  3 改变路由在url中#后面

history模式

切换时正常改变url路径，无#

• 原理
  通过浏览器提供的 pushstate和replacestate。pushstate增加浏览器的会话历史栈，replacestate替换当前的会话历史，故不会重新请求url。 但是因为popstate不能监控到pushstate和replacestate，所以我们需要自定义监控事件，合适的时机抛出
• 具体实现

    
    
    
    
    
    
    
    



    

        
首页
        
商品
        
我的
    
    






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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

• 特点
  1 通过pushstate来进行路由切换，无需刷新页面
  2 路径URL比较清晰
  3 切换路由后** 刷新会报错** ，需要后端帮忙Nginx重新请求到index.html

参考文章

1 .[https://juejin.cn/post/7127143415879303204][https://juejin.cn/post/7127143415879303204]