- In this video, we will set up
the view router, and set up two routes,
one for the message list,
or messages,
and the other for new messages.
Let's continue in our front end project.
To set up the router, we will open
up main.gs
We will need to define all of
our routes inside main.gs,
but before we use the
view router, we will need to install it.
So let's open up the terminal
(demonstrates lesson on screen)
and using MPN we will install
view-router.
Then below line 5 lets import that.
(speaker illustrates how to import on screen)
Then below line 8, we will tell view
to use our view router.
(speaker demonstrates example on screen)
And now, lets set up each individual route.
So I will create the constant call routes,
and this will be a list with each
individual route, and within that
list we will have objects that have
a path property, and in this case
I will have a route path that shows
our messages, and uses the component,
using the component property where
we will have to specify our messages
component, and since I don't have that
imported in our main gs,
we will have to
do that also.
So, add a new line to the top below
the last line 6 import, and
I will import the messages from
components messages,
and now
we will fill in the component property
on line 14 with messages.
So we have created our first route.
And now we just need to let the router
know about our routes list.
So let's create another const called
router, and we will set it to new
view router, and in here we will pass in
an object, we will pass in our routes,
and that should be it for now.
And then we simply take our new router,
and we will pass it into the view object
on line 22, above our store.
Let's sync that, and make sure there is no errors.
So inside our app,
if you go to the root
route which is just a slash we would
expect to see just the messages component
since that is what we have specified in
our path, but we're seeing both
new message and messages,
just like before we added the router.
And that's because we are missing one important step.
Back in our app component, we're manually showing
new messages, and messages.
But we actually need to tell view where to
show what our router has been set to,
or what route the user is requesting.
To do that,
let's take out everything
between line 10 and line 13.
Since we don't wish to manually
but instead, we will
use router-view
To show a component the router
has currently requested.
So save that, and lets give it a try.
And now we can see just the messages component,
and say we change the routes to
something else that does not exist,
you can see our messages
component is no longer showing.
The final thing that I'd like to do is
at that space again between our
nav bar and what our router is showing,
so... let's add a BR,
right above the router view.
And that's pretty good.
Next, lets take a look at creating that
new message route, and button in the nav bar.