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
2525yarn 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
You can’t perform that action at this time.
0 commit comments