-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvue-router-dynamic-nested.html
198 lines (184 loc) · 6.38 KB
/
vue-router-dynamic-nested.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue router 動態&巢狀式</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/obsidian.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Dynamic & Nested</h1>
<h2>動態 routes</h2>
<p>變數網址：在 router 的網址，有個部份想要成為變數帶到 <code>components</code>裡的變數時。就要想起這個功能</p>
<b>javascript</b>
<p>在<code>component</code>設定<code>template</code>，要用<code>$route.params</code>物件的屬性帶出變數</p>
<pre><code class="js">const User = { template: '< div>User {{ $route.params.id }}< /div>' }</code></pre>
<p>在<code>routes</code>設定<code>path</code>，加上「:」就變成變數。</p>
<pre><code class="js">const routes = [
{ path: '/user/:id', component: User }
]</code></pre>
<h3>事件觸發</h3>
<p class="tip">如果要在變化時做事件觸發，要加一個簡易的<code>watch</code>在<code>components</code>裡面。<br />
為什麼要這麼做呢？為了達到高效能的程式行為，組件本身會重複利用，並不會重新建構、重新觸發事件。</p>
<pre><code class="js">const User = {
template: '...',
watch: {
'$route' (to, from) {
console.log(to, from); //就是可以hook的地方
}
}
}</code></pre>
<h3>優先等級</h3>
<p class="tip">誰先定義的，誰的優先級就最高。</p>
<h2>Demo</h2>
<div id="app" style="height: 60px">
<p>
<router-link to="/user/One">User 1</router-link>
<router-link to="/user/Two">User 2</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
function app1() {
const User = {
template: '<div>User {{ $route.params.id }}</div>',
watch: {
'$route' (to, from) {
console.log(to, from);
}
}
}
const routes = [
{ path: '/user/:id', component: User }
]
const router = new VueRouter({
routes
})
return new Vue({
router
}).$mount('#app')
}
const a1 = app1()
</script>
<h2>巢狀式 routes</h2>
<p>在一個vue 實例中，有一個<code>component</code>叫User。<br />
而User會出現在<code>< router-view>< /router-view></code>的位置。</p>
<b>javascript</b>
<p>如果我們希望User裡面，會再有router的效果，就是巢狀式的router。必須在User裡面，再放一個<br />
<code>< router-view>< /router-view></code>。</p>
<pre><code class="js">
const User = {
template: `
< div class="user">
< h2>User {{ $route.params.id }}< /h2>
< router-view>< /router-view>
< /div>
`
}
</code></pre>
<p>設定子層routes，在<code>routes</code>物件裡，加上<code>children</code></p>
<pre><code class="js">const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 < router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 < router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})</code></pre>
<p>然後補上兩個children裡的components。</p>
<pre><code class="js">
const UserProfile = {
template: `<span>UserProfile</span>`
}
const UserPosts = {
template: `<span>UserPosts</span>`
}</code></pre>
<h2>Demo</h2>
<div id="app2" style="height: 116.81px">
<p>
<router-link to="/user/One/profile">User 1 profile</router-link>
<router-link to="/user/One/posts">User 1 posts</router-link>
<router-link to="/user/Two/profile">User 2 profile</router-link>
<router-link to="/user/Two/posts">User 2 posts</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
function app2() {
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserProfile = {
template: `<span>UserProfile</span>`
}
const UserPosts = {
template: `<span>UserPosts</span>`
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 < router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 < router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
return new Vue({
router
}).$mount('#app2')
}
const a2 = app2()
</script>
<h2>指定<code>< router-view>< /router-view></code></h2>
<p>在Vue router中，可以一個連結觸發多個components的渲染，首先要先將<code>router-view</code>命名</p>
<b>HTML</b>
<pre><code class="html">
< router-view name="a">< /router-view>
</code></pre>
<p>並且在<code>routes</code>中，設計一個連結，多個<code>components</code><br />
沒有設定的，就都會被渲染成相同的components。指定名字的會渲染成指定的components</p>
<pre><code class="js">const routes = [
{ path: '',
components: {
default: news,
a: sale
}
},
//...
]</code></pre>
</body>
</html>