@@ -36,15 +36,22 @@ const Quy = {
36
36
</div>
37
37
`
38
38
}
39
- const Quux = { template : '<div>quux</div>' }
40
- const Zap = { template : '<div><h3>zap</h3><pre>{{ $route.params.zapId }}</pre></div>' }
39
+ const Quux = {
40
+ template : `<div>quux<router-link :to="{ name: 'quuy' }">go to quuy</router-link></div>`
41
+ }
42
+ const Quuy = { template : '<div>quuy</div>' }
43
+ const Zap = {
44
+ template : '<div><h3>zap</h3><pre>{{ $route.params.zapId }}</pre></div>'
45
+ }
41
46
42
47
const router = new VueRouter ( {
43
48
mode : 'history' ,
44
49
base : __dirname ,
45
50
routes : [
46
51
{ path : '/' , redirect : '/parent' } ,
47
- { path : '/parent' , component : Parent ,
52
+ {
53
+ path : '/parent' ,
54
+ component : Parent ,
48
55
children : [
49
56
// an empty path will be treated as the default, e.g.
50
57
// components rendered at /parent: Root -> Parent -> Default
@@ -65,7 +72,10 @@ const router = new VueRouter({
65
72
{
66
73
path : 'qux/:quxId' ,
67
74
component : Qux ,
68
- children : [ { path : 'quux' , name : 'quux' , component : Quux } ]
75
+ children : [
76
+ { path : 'quux' , name : 'quux' , component : Quux } ,
77
+ { path : 'quuy' , name : 'quuy' , component : Quuy }
78
+ ]
69
79
} ,
70
80
71
81
{ path : 'quy/:quyId' , component : Quy } ,
@@ -91,6 +101,8 @@ new Vue({
91
101
<li><router-link :to="{name: 'zap'}">/parent/zap</router-link></li>
92
102
<li><router-link :to="{name: 'zap', params: {zapId: 1}}">/parent/zap/1</router-link></li>
93
103
<li><router-link :to="{ params: { zapId: 2 }}">{ params: { zapId: 2 }} (relative params)</router-link></li>
104
+ <li><router-link to="/parent/qux/1/quux">/parent/qux/1/quux</router-link></li>
105
+ <li><router-link to="/parent/qux/2/quux">/parent/qux/2/quux</router-link></li>
94
106
</ul>
95
107
<router-view class="view"></router-view>
96
108
</div>
0 commit comments