Welcome to VueJS workshop
Navigator
Create a new project using vue-cli without vue-router or VueX
Create /views directory and inside Home and Blog component
Create BaseLayout component that will have header, footer and content slot and register it globally.
Create DummyNavigator component
navigator will get routes object prop
when routeChange event triggered navigator will switch displayed component based on provided prop
navigator will use history api to change browser url
Exercises
Vue Router
- Nested route/view mapping
- Modular, component-based router configuration
- Route params, query, wildcards
- View transition effects powered by Vue.js' transition system
- Fine-grained navigation control
- Links with automatic active CSS classes
- HTML5 history mode or hash mode, with auto-fallback in IE9
- Customizable Scroll Behavior
Vue Router
from vue cli:
vue add vue-router
from vue ui
Vue Router
router injected into Vue instance
route url
route name - use this for navigation
per route code splitting technique
history mode will won't show hash in url
That will need server setup to serve always index.html
Vue Router
where to navigate on click
where to present component
named routes
use name instead of url
if url will change in the future it will require only one place to change it
Dynamic routes
pass params to about route
dynamic routes
routes that get params based on their url
what we will get
by setting props: true we will enable to pass props on param object and spread params into component
let's pass post id in url
You can also pass props using object notation for static props
Or a function
props: { showSidebar: false } }
props: (route) => ({ query: route.query.q }) }
Note: in a real-world scenario we won't pass post in props, but will use VueX to get post by id
posts array on data object
pass post as a prop
BlogComponent.js
Caveat: PostComponent won't be rerendered if the route will change from post/1 to post/2
So logic in created() lifecycle hook need to moved elsewhere
Use NavigationGuards
watch $route changes
If this happens in nested route, we just need to add a :key to router-view
You can catch all other routes using *
when using * pathMatch is added to $route params
Navigating
Vue router expose $route and $router object that can be used to navigate programmatically
router.replace(location, onComplete?, onAbort?)
styling links
matches on any route matches 'home' named route path even when just starting with it
matches on exact route matches 'about' named route path
match exact path
changing wrapping element
v-slot directive to get access to router-link data
If you don't pass single child, router-link will wrap in span element
query string
to get query string from url you can simply access $route.query
named router-view
Sometimes you want multiple views to be updated for a route change
nested routes
will be rendered inside <router-view> in BlogComponent
Alias
An alias of /a as /b means when the user visits /b, the URL remains /b, but it will be matched as if the user is visiting /a.
This will mean for example that if you go to /post it will load BlogComponent and $route.name will be blog
Redirects
you can use a function, an object with a named route or a string with route to redirect to
Navigation guards
You can define either global, per route or in-component navigation guards to do some logic in different state of resolving the route
route to navigate to
route to navigate from
next function that must be called once to resolve navigation
Navigation guards
next function accept a boolean next(false) won't navigate
will accept anything router-link or router.push accepts
instance of Error - navigation will be aborted and onError will trigger
Global guards
beforeEnter - use this guard before navigation is confirmed.
beforeResolve - will be called after all in-component guards will be resolved and async components loaded
afterEach - will be called after navigation is resolved, but cannot affect the route
Per Route guads
Per Route guads
In Component guards
beforeRouteLeave - used usually for confirmation if user wants to leave the page
beforeRouteEnter - called before route is confirmed. There is no access to component up until route is confirmed: next(cmp => {})
beforeRouteUpdate - component is available so you can access this
The Flow
- Navigation is triggered.
- Call beforeRouteLeave guards in deactivated components.
- Call global beforeEach guards.
- Call beforeRouteUpdate guards in reused components.
- Call beforeEnter in route configs.
- Resolve async route components.
- Call beforeRouteEnter in activated components.
- Call global beforeResolve guards.
- Navigation confirmed.
- Call global afterEach hooks.
- DOM updates triggered.
- Call callbacks passed to next in beforeRouteEnter guards with instantiated instances.
meta fields
Meta fields are used to pass additional data to components. often for auth
Authenticating
to access meta field we need to access matched route record
route can match multiple routes so we need to check matched array to see if any of the matched routes is protected
we will typically put a redirect query string to know where to redirect once logged in
Excercises
- Add vue-router to our previous exercise project
- Switch Navigator component we've created to be a Vue Router
- Add Navigation bar with Nav links using named routes
- Add custom active class to Nav link
- Create store/store.js file that will have a post dictionary, getter, and setter. (post should also contain userId and isPublic flag)
- On the Blog page, display a list of blog posts titles fetched from dummy API and stored in store.js post dictionary.
- When clicking on a blog post navigate to Post page with the full post text.
- Add the next and previous button in every post to navigate to the next or previous post. When reaching the end of posts, get back to blog page (tip: use beforeRouteUpdate)
- Create 404 route and catch all unmatched routes there
- Create UserProfile protected page and redirect to Login page when trying to access