Skip to content

Commit b588bb9

Browse files
committed
refactor readme
1 parent d08d0f5 commit b588bb9

File tree

1 file changed

+58
-1
lines changed

1 file changed

+58
-1
lines changed

README.md

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,64 @@ Install using Yarn
2525
yarn add vue-router-middleware-plugin
2626
```
2727

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/).
2986

3087
## Contributing
3188

0 commit comments

Comments
 (0)