-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (106 loc) · 3.63 KB
/
index.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>qs-router</title>
<link rel="import" href="components/login.html" />
<style type="text/css">
.index-tipsy {
color: green;
}
.login {
color: #FF0000;
}
</style>
</head>
<body>
<h1>hash模式</h1>
<br/>
<a href="#/login">login</a>
<br/>
<a href="#/login/admin">login/admin</a>
<br/>
<a href="#/login/user">login/user</a>
<br/>
<a href="#/login/user/info">login/user/info</a>
<br/>
<a href="#/register">register</a>
<br />
<button onclick="testPush()">测试用代码跳转，在控制台查看拿到的参数信息！</button>
<template id="index">
<h1 class="index-tipsy">我是使用template标签定义的首页，哈哈~</h1>
</template>
<template id="register">
<h1 class="register-tipsy">我是注册页面耶~~</h1>
</template>
<div id="template"></div>
<div id="children1"></div>
<script type="text/javascript" src="router.js"></script>
<script type="text/javascript">
var IndexComponent = document.getElementById('index').content.cloneNode(true);
var LoginComponent = document.querySelector('link[rel=import]').import.querySelector('body').children[0];
var RegisterComponent = document.getElementById('register').content;
let router = new Router({
base: '/qs-router',
routes: [{
path: '/',
component: {
template: IndexComponent,
beforeRouteUpdate: params => {
console.log('开始执行');
},
afterRouteUpdate: params => {
console.log('执行结束');
}
},
children: [{
path: 'login',
component: {
template: LoginComponent
},
children: [{
path: 'admin',
component: {
template: `<h1>main</h1>`,
afterRouteUpdate: params => {
console.log('渲染结束，我拿到参数啦!');
console.log(params);
}
}
}, {
path: 'user',
component: {
id: 'children1',
template: `<h1>children -> children</h1><div id='userInfo'></div>`
},
children: [{
path: 'info',
component: {
id: 'userInfo',
template: `<h1>children -> children -> children</h1>`
}
}]
}]
}, {
path: 'register',
component: {
template: RegisterComponent
}
}]
}]
});
// 字符串
// router.push(`/login/${id}`);
function testPush() {
// 对象
router.push({
path: '/login/admin',
query: {
'id': 1,
'name': 'test'
}
})
}
</script>
</body>
</html>