-
Notifications
You must be signed in to change notification settings - Fork 32
/
index2.html
98 lines (92 loc) · 4.29 KB
/
index2.html
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
<!DOCTYPE HTML>
<html>
<head>
<title>自定义路由 route 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div id="routerView" data-animationName="fade">
<div class="page" data-hash="/home">
<div class="page-content">
<div id="home"></div>
</div>
</div>
<div class="page" data-hash="/list">
<div class="page-content">
<div id="list"></div>
<div style="height: 700px;border: solid 1px red;background-color: #eee;margin-top: 20px;">内容占位</div>
</div>
</div>
<div class="page" data-hash="/detail">
<div class="page-content">
<div id="detail"></div>
</div>
</div>
<div class="page" data-hash="/detail2">
<div class="page-content">
<div id="detail2"></div>
<div style="height: 700px;border: solid 1px red;background-color: pink;margin-top: 20px;">内容占位</div>
</div>
</div>
</div>
<script type="text/javascript" src="./js/route.js"></script>
<script type="text/javascript">
var config = {
routerViewId: 'routerView', // 路由切换的挂载点 id
stackPages: true, // 多级页面缓存
animationName: "fade", // 切换页面时的动画
routes: [{
path: "/home",
name: "home",
callback: function(route) {
console.log('home:', route)
var str = "<div><a class='back' onclick='window.history.go(-1)'>返回</a></div> <h2>首页</h2> <input type='text'> <div><a href='javascript:void(0);' onclick='linkTo(\"#/list\")'>列表</a></div><div class='height'>内容占位</div>"
document.querySelector("#home").innerHTML = str
}
}, {
path: "/list",
name: "list",
callback: function(route) {
console.log('list:', route)
var str = "<div><a class='back' onclick='window.history.go(-1)'>返回</a></div> <h2>列表</h2> <input type='text'> <div><a href='javascript:void(0);' onclick='linkTo(\"#/detail\")'>详情</a></div>"
document.querySelector("#list").innerHTML = str
}
}, {
path: "/detail",
name: "detail",
callback: function(route) {
console.log('detail:', route)
var str = "<div><a class='back' onclick='window.history.go(-1)'>返回</a></div> <h2>详情</h2> <input type='text'> <div><a href='javascript:void(0);' onclick='linkTo(\"#/detail2\")'>详情 2</a></div><div class='height'>内容占位</div>"
document.querySelector("#detail").innerHTML = str
}
}, {
path: "/detail2",
name: "detail2",
callback: function(route) {
console.log('detail2:', route)
var str = "<div><a class='back' onclick='window.history.go(-1)'>返回</a></div> <h2>详情 2</h2> <input type='text'> <div><a href='javascript:void(0);' onclick='linkTo(\"#/home\")'>首页</a></div>"
document.querySelector("#detail2").innerHTML = str
}
}]
}
//初始化路由
router.init(config)
router.beforeEach(function(transition) {
console.log('切换之 前 dosomething', transition)
setTimeout(function() {
//模拟切换之前延迟，比如说做个异步登录信息验证
transition.next()
}, 100)
})
router.afterEach(function(transition) {
console.log("切换之 后 dosomething", transition)
})
// rem 单位适配
var width = window.screen.width
document.getElementsByTagName('html')[0].style.fontSize = width / 7.5 + 'px';
</script>
</body>
<!-- https://biaochenxuying.github.io/route/index2.html#/home -->
</html>