File tree Expand file tree Collapse file tree 1 file changed +58
-1
lines changed Expand file tree Collapse file tree 1 file changed +58
-1
lines changed Original file line number Diff line number Diff line change @@ -25,7 +25,64 @@ Install using Yarn
25
25
yarn add vue-router-middleware-plugin
26
26
```
27
27
28
- ### :eyes : Goto [ Documentations] ( https://vue-router-middleware-plugin.netlify.com/ )
28
+ ## Get Started in 3 Easy Steps
29
+
30
+ 1 . Register middleware plugin in your app.
31
+
32
+ ``` javascript
33
+ import Vue from ' vue'
34
+ import MiddlewarePlugin from ' vue-router-middleware-plugin'
35
+ import router from ' @/path-to-router'
36
+
37
+ Vue .use (MiddlewarePlugin, router)
38
+ ```
39
+
40
+ 2. Create a middleware function .
41
+
42
+ ```javascript
43
+ import store from '@/path-to-store'
44
+
45
+ export default ({ to, from, redirect }) => {
46
+ if (! store .getters .isLoggedIn ) {
47
+ redirect (' /login' )
48
+ }
49
+ }
50
+ ```
51
+
52
+ 3. Attach middleware to a route.
53
+
54
+ ` ` ` javascript
55
+ import AuthMiddleware from '@/path-to-auth-middleware'
56
+
57
+ export default new VueRouter({
58
+ routes: [
59
+ {
60
+ path: '/',
61
+ meta: {
62
+ middleware: AuthMiddleware
63
+ },
64
+ .
65
+ .
66
+ },
67
+ ` ` `
68
+
69
+ Note: You may attach multiple middlewares to a route.
70
+
71
+ ` ` ` javascript
72
+ {
73
+ path: '/login',
74
+ meta: {
75
+ middleware: [LoggerMiddleware, AnalyticsMiddleware]
76
+ },
77
+ .
78
+ .
79
+ },
80
+ ` ` `
81
+
82
+ Easy as that to get started.
83
+
84
+ : eyes: For advanced features like global middlewares and
85
+ middleware context continue to [Documentations](https: // vue-router-middleware-plugin.netlify.com/).
29
86
30
87
## Contributing
31
88
You can’t perform that action at this time.
0 commit comments