You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,9 @@ vue-route
4
4
Routing directive for Vue.js **(v0.11)**, inspired by ng-view.
5
5
Based on `v-component` thus benefits from `v-transition`, `keep-alive`, `wait-for`, `transition-mode`.
6
6
7
-
Allows you to declare your routes on the $root Vue object:
7
+
Allows you to declare your routes on the `$root` Vue object:
8
8
9
-
```
9
+
```js
10
10
var root =newVue({
11
11
el:'body',
12
12
@@ -25,14 +25,14 @@ var root = new Vue({
25
25
options: {
26
26
hashbang:true
27
27
}
28
-
},
29
-
})
28
+
}
29
+
});
30
30
31
31
```
32
32
33
-
with minimal markup:
33
+
With minimal markup:
34
34
35
-
```
35
+
```html
36
36
<body>
37
37
<divv-route></div>
38
38
</body>
@@ -45,9 +45,9 @@ with minimal markup:
45
45
46
46
**1.** Install with npm/component(1): `npm i vue-route --save` or `component install ayamflow/vue-route`.
47
47
48
-
**2.**require and install the plugin:
48
+
**2.**Require and install the plugin:
49
49
50
-
```
50
+
```js
51
51
var Vue =require('vue'),
52
52
route =require('vue-route');
53
53
@@ -56,27 +56,27 @@ Vue.use(route); // BOOM
56
56
57
57
**3.** Put the `<div v-route></div>` in your main template.
58
58
59
-
**4.** Pass your routes to the $root VM of you app (see example above).
59
+
**4.** Pass your routes to the `$root` VM of you app (see example above).
60
60
61
61
**5.** Profit !
62
62
63
63
## Additional infos
64
64
65
-
*routes definition: when you pass your routes to the $root, you can pass several properties:
66
-
**componentId*: the Vue.component id for the associated template/VM.
67
-
**beforeUpdate*: a callback (method or name of method on the vm) to call before effectively changing to this route
68
-
**afterUpdate*: a callback (method or name of method on the vm) to call after effectively having changed to this route
69
-
**data*: an object that will be **merged** with the view's `$data`. This is useful when we need to use the same component for different urls but using different data.
70
-
**isDefault*: boolean indicating wether this page should be the default, in case of non-existing URL. Think of it as the `otherwise` from Angular, so basically a 404 or the home page.
65
+
*Routes definition: when you pass your routes to the `$root`, you can pass several properties:
66
+
*`componentId`: the Vue.component id for the associated template/VM.
67
+
*`beforeUpdate`: a callback (method or name of method on the vm) to call before effectively changing to this routehtml.
68
+
*`afterUpdate`: a callback (method or name of method on the vm) to call after effectively having changed to this route.
69
+
*`data`: an object that will be **merged** with the view's `$data`. This is useful when we need to use the same component for different urls but using different data.
70
+
*`isDefault`: boolean indicating wether this page should be the default, in case of non-existing URL. Think of it as the `otherwise` from Angular, so basically a 404 or the home page.
71
71
72
-
beforeUpdate is a middleware, this means you need to call the `next` function provided as the third argument, to continue routing. This allows to prevent a route based on some condition.
72
+
`beforeUpdate` is a middleware, this means you need to call the `next` function provided as the third argument, to continue routing. This allows to prevent a route based on some condition.
73
73
74
74
Vue is augmented with an additional method, `Vue.navigate(path, [trigger])`. [trigger] is a boolean (defaults to true) that will `pushState` if true, `replaceState` otherwise.
75
75
76
-
* The router will emit events on your $root VM: `router:started`, `router:beforeUpdate`, `router:afterUpdate`.
76
+
* The router will emit events on your `$root` VM: `router:started`, `router:beforeUpdate`, `router:afterUpdate`.
77
77
78
78
* You can pass a `options` hash to pass configuration to the router:
79
-
*`hashbang` boolean (defaults to false) to use '#!' urls
79
+
*`hashbang` boolean (defaults to false) to use `#!` urls. Note that your links shouldn't include hashbangs, the router handles this.
80
80
*`click` boolean (defaults to true) to automatically bind all click to the router. Not that if `false`, you will need to explicitly call `Vue.navigate` method)
81
81
*`base` string (defaults to '/') to specify the base path
82
82
*`broadcast` boolean (defaults to false) if true the events will be emitted using the $root `$broadcast` method, so all child VMs will receive the event until a handler `return false;`. If false, it uses `$emit`.
@@ -85,13 +85,13 @@ Vue is augmented with an additional method, `Vue.navigate(path, [trigger])`. [tr
85
85
## Location context
86
86
87
87
When the router emits an event, 2 parameters are passed: `location` and `oldLocation`. Like in Angular, it is an object containing some useful properties:
88
-
* regexp: the route regexp, such as `/items/:itemId`
89
-
* path: the current path, such as `/items/razor/`
90
-
* params: a hash of the params from the route, here `{item: 'razor'}`
91
-
* componentId: the componentId associated to the current route
88
+
*`regexp`: the route regexp, such as `/items/:itemId`.
89
+
*`path`: the current path, such as `/items/razor/`.
90
+
*`params`: a hash of the params from the route, here `{item: 'razor'}`.
91
+
*`componentId`: the componentId associated to the current route.
92
92
93
93
## Contributing
94
94
95
-
*fork & PR on **[dev](https://github.com/ayamflow/vue-route/tree/dev)** branch.
96
-
*if possible, add tests to cover the changes.
97
-
*code style: 4 tabs, semicolons. Check the code if in doubt.
95
+
*Fork & PR on **[dev](https://github.com/ayamflow/vue-route/tree/dev)** branch.
96
+
*If possible, add tests to cover the changes.
97
+
*Code style: 4 tabs, semicolons. Check the code if in doubt.
0 commit comments