- 00:00:01 welcome to this video welcome to this
- 00:00:03 tutorial in this tutorial we're going to
- 00:00:06 have a look at how routing in view chess
- 00:00:08 and a view chess application works for
- 00:00:11 that I'm in a brand new application
- 00:00:13 setup here and I created it using the
- 00:00:15 view CLI
- 00:00:16 you can find a video on how to use the
- 00:00:18 CLI here on this channel
- 00:00:21 now I basically created a plain vanilla
- 00:00:23 very simple application with my app that
- 00:00:26 you follow I only say let's go somewhere
- 00:00:28 in the template this is what you're
- 00:00:30 seeing here and I do have two other
- 00:00:32 templates here too I guess so you can
- 00:00:34 see it home and users and in both I only
- 00:00:38 say I'm home and users overview but I
- 00:00:40 think we can easily imagine that we
- 00:00:42 would have some users in there or
- 00:00:44 generally some different components you
- 00:00:46 want to load conditionally through
- 00:00:48 routing now why would you want to use
- 00:00:50 routing in the first place there is the
- 00:00:52 if and so on if you want to
- 00:00:54 conditionally show certain components
- 00:00:56 right well routing is of course useful
- 00:00:59 if you want to create a single page
- 00:01:01 application that means the only page
- 00:01:04 ever getting served by your server is
- 00:01:07 the index.html file this file here now
- 00:01:10 in this file we're loading the beauteous
- 00:01:12 application but in this application we
- 00:01:15 maybe want to recreate this application
- 00:01:20 like feeling this website feeling where
- 00:01:22 we do have different routes now here
- 00:01:24 though the routes will not be handled by
- 00:01:26 our server we're not sending the request
- 00:01:29 to the server we're not getting back
- 00:01:31 multiple pages or reviews from the
- 00:01:33 server instead as I just mentioned we're
- 00:01:35 only getting back this index.html file
- 00:01:38 but we still want to handle different
- 00:01:40 routes and turns out we can do that with
- 00:01:43 the view chess router
- 00:01:44 a nice little package we can add which
- 00:01:47 allows us to parse that URL and load
- 00:01:50 different components as pages so to say
- 00:01:53 depending on which URL we're visiting
- 00:01:55 now in this video we're going to have a
- 00:01:57 look at how we can set up this router
- 00:01:59 how we can configure our basic routes
- 00:02:02 and how we can go there in the next
- 00:02:05 video I'll take a closer look at how we
- 00:02:06 can navigate around and especially
- 00:02:08 important how we can pass data when
- 00:02:11 switching the route so enough to talking
- 00:02:13 let's start working on that router I
- 00:02:16 only get my development server running
- 00:02:19 here and I'm going to cancer by hitting
- 00:02:20 ctrl command at control C excuse me and
- 00:02:23 then I want to install that via router
- 00:02:26 that's an extra package it's not
- 00:02:28 included in a default view J's package
- 00:02:30 and we can't install it running NPM
- 00:02:32 install – – safe – save it as a
- 00:02:37 dependency new package J's file the
- 00:02:40 router this will pull down the router
- 00:02:42 and make it available for us to use in
- 00:02:44 this project
- 00:02:45 now with the router installed here we
- 00:02:48 can go to the main dot JS file which is
- 00:02:51 our route entry point for that
- 00:02:53 application as you learn in this eli
- 00:02:55 video if you watch that on this channel
- 00:02:57 and here i can now import the view
- 00:03:00 router now i can give it any name i want
- 00:03:02 here but i have to import that from view
- 00:03:06 router like this so now this will give
- 00:03:10 me that router and in order to be able
- 00:03:12 to use it here in this application where
- 00:03:14 i'm using webpack to bundle everything i
- 00:03:16 have to take my view object which i'm
- 00:03:20 importing from view so this route view
- 00:03:23 not instance this view object really
- 00:03:26 from the view package and executi use
- 00:03:28 math there this enables plug-ins which i
- 00:03:32 can use and the router is just such a
- 00:03:34 plugin so by calling view use and
- 00:03:37 passing the view router I'm making sure
- 00:03:40 that routing is now actually enabled and
- 00:03:43 will work so dad now gives us X to the
- 00:03:46 router but we haven't got any routes to
- 00:03:49 navigate use to navigate you right we
- 00:03:51 get the app excuse me you get the home
- 00:03:53 and user third view file but how do we
- 00:03:55 get there well we need to set up our
- 00:03:58 router so let's add a new constant QT
- 00:04:02 may not chase file and let's call it
- 00:04:04 routes to set up some routes first now
- 00:04:07 routes is basically an array of routes
- 00:04:09 this of course leaves the question how
- 00:04:12 does one individual route look like well
- 00:04:16 one route is simply just a JavaScript
- 00:04:18 object so we configure a route by adding
- 00:04:21 a JavaScript object to this array now
- 00:04:23 that array is not getting used than you
- 00:04:25 were but we're going to change this soon
- 00:04:27 so in order to set up around here we now
- 00:04:29 need to define a path and path and this
- 00:04:33 is important
- 00:04:34 refers to the part in our URL after our
- 00:04:37 domain so here the domain is localhost
- 00:04:39 8080 and the path would then be for
- 00:04:42 example slash users that would be a path
- 00:04:44 slash users so let's say we want to
- 00:04:48 handle the slash users path so we add
- 00:04:50 slash users here and then we need to
- 00:04:53 specify which component should get
- 00:04:55 loaded
- 00:04:55 so component now here we can define
- 00:04:59 which component we want to load if the
- 00:05:02 user navigates to localhost 8080 slash
- 00:05:06 users now if that shall be the users
- 00:05:09 component from the user study view file
- 00:05:11 we need to import that so import users
- 00:05:14 from users dub view and here I simply
- 00:05:20 set us up as a component then users this
- 00:05:23 gives me the users path now let's add
- 00:05:25 another one let's add a default pop
- 00:05:28 shall we so that we always load the home
- 00:05:31 component if we're just at localhost
- 00:05:33 8080 so for dad I would just enter an
- 00:05:37 empty pop just slash and here I will
- 00:05:40 duplicate this and I want to load the
- 00:05:43 home dot view for the home component and
- 00:05:45 therefore here the component is home now
- 00:05:48 with that I got two routes set up users
- 00:05:51 for slash users and home for just slash
- 00:05:54 for localhost 8080 in this case here so
- 00:05:58 we kept aroused is certainly great but
- 00:06:01 how do we get the routes into our
- 00:06:03 application now well nothing easier than
- 00:06:06 that we simply create a new constant
- 00:06:09 let's call it router and router now uses
- 00:06:13 the view router zoo new view router here
- 00:06:15 and we pass an object to that
- 00:06:18 constructor in this object I simply pass
- 00:06:22 routes and I could say routes : routes
- 00:06:26 but since I'm using es6 here I can take
- 00:06:28 the shortcut and just say routes and es6
- 00:06:31 will automatically expand this to routes
- 00:06:34 routes so that's just a shortcut in a
- 00:06:36 case where the property name and DD well
- 00:06:39 name of the you
- 00:06:40 or the variable name of wear which holds
- 00:06:43 the value are equal so if both are equal
- 00:06:46 we can leave out the value name and just
- 00:06:47 put routes here this creates the router
- 00:06:50 and now we have to add this router to
- 00:06:53 our route view instance by adding router
- 00:06:56 : router or again using the shortcut
- 00:06:59 just router and let it expand
- 00:07:01 automatically with that the routes are
- 00:07:04 set up the router is set up the routers
- 00:07:06 also added as a plugin to view che s
- 00:07:09 almost everything has been done now we
- 00:07:13 need a place to load these components at
- 00:07:15 because right now yeah we get slash
- 00:07:18 users and slash registered as routes but
- 00:07:22 we don't have any place to load them
- 00:07:24 right so let's go to the app W file and
- 00:07:27 here in that template we should define a
- 00:07:30 place where view chess should render the
- 00:07:33 routes we're navigating to you that is
- 00:07:36 done by adding a router view a router
- 00:07:39 view is just a reserved component you
- 00:07:42 should say it looks like a component
- 00:07:43 right and it will be recognized by the
- 00:07:45 view router and then it will take this
- 00:07:48 place in our template and put the
- 00:07:50 component which gets loaded
- 00:07:51 conditionally and this place so let's
- 00:07:55 run the server again by running NPM run
- 00:07:57 def here and we should have working
- 00:08:00 routing now if we go back to the
- 00:08:02 application looks pretty good already
- 00:08:04 we're at I'm home just by well loading
- 00:08:07 our page and we do recognize this
- 00:08:10 strange hash tag here right well I'll
- 00:08:12 come back to this in a second let's try
- 00:08:15 slash users here first looks good to me
- 00:08:17 so that's getting loaded though what is
- 00:08:21 this strange hash tag here doing why
- 00:08:24 can't we just wizard slash users why is
- 00:08:27 it always putting this strange hash tag
- 00:08:30 here and now it looks even weirder
- 00:08:31 what's that
- 00:08:33 well this hash tag here which gets added
- 00:08:36 automatically is kind of the way how we
- 00:08:39 did routing a couple of while years ago
- 00:08:42 1 or 2 years ago even it basically means
- 00:08:45 the part in front of the hash tag this
- 00:08:48 part here gets handled by the server
- 00:08:50 because this is
- 00:08:52 every route or and every URL you enter
- 00:08:56 up here and when you hit enter
- 00:08:58 gets of course sent to the server that's
- 00:09:00 how the internet works right it would be
- 00:09:01 bad if it would be otherwise way if it
- 00:09:03 workout would work otherwise but here
- 00:09:07 our routes are set up in our view choice
- 00:09:09 application which of course runs in a
- 00:09:11 browser so how on earth should our
- 00:09:15 server know that there is a slash users
- 00:09:18 route in our client application in our
- 00:09:21 view application the answer is it
- 00:09:24 doesn't and this is where this hash tag
- 00:09:26 here comes in the part in front of the
- 00:09:29 hash tag is sent to the server and the
- 00:09:30 server tries to find a fitting route the
- 00:09:33 part after the hash tag is ignored by
- 00:09:36 the server and instead handled by the
- 00:09:38 client by beauty is this is right here
- 00:09:41 we can enter slash users and we do
- 00:09:44 layout this route because the server
- 00:09:46 loads this part here gives us the
- 00:09:49 index.html page the vue.js application
- 00:09:51 starts up and then this part here is
- 00:09:53 sent to our front-end application to
- 00:09:56 JavaScript and this is able to handle it
- 00:09:58 because we register this route now
- 00:10:01 that's nice but you probably noticed if
- 00:10:04 I delete the hash tag and just enter
- 00:10:06 slash users it now puts the hash tag
- 00:10:09 here after users well that is because
- 00:10:11 our test development server here is
- 00:10:14 already configured in a certain way
- 00:10:16 where it will send all 404 errors so
- 00:10:20 every router doesn't find on the server
- 00:10:22 automatically to the client that is a
- 00:10:24 cool behavior which you see a lot
- 00:10:26 nowadays and you want to configure your
- 00:10:29 server in this way chances are how you
- 00:10:31 want to do that of course is at least
- 00:10:33 because if you do it like this if you
- 00:10:36 ignore all not found 404 errors on the
- 00:10:40 server you can always pass on unfound
- 00:10:44 routes to the client and let the client
- 00:10:46 handle it which is what we want to do
- 00:10:48 here our server only has one route just
- 00:10:52 the route route this one here so it
- 00:10:55 should not even bother with any other
- 00:10:57 routes so we don't need the hash tag we
- 00:10:59 can tell it well please always send all
- 00:11:02 requests to the client now as a set as
- 00:11:04 develop
- 00:11:05 server is already configured in the way
- 00:11:07 your server on the server you want to
- 00:11:11 use for your application has to be
- 00:11:13 configured in such a way that it always
- 00:11:14 sends back the index.html file if that
- 00:11:18 is the case we can get rid of the hash
- 00:11:20 tag by going to your main J's file to
- 00:11:23 the router which we configure here and
- 00:11:25 adding the mode property and here we
- 00:11:29 want to add history history basically is
- 00:11:32 the shortcut for the history mode that's
- 00:11:35 just a name of that mode where we
- 00:11:37 basically use just a / – put it in
- 00:11:41 easier words – where we don't use the
- 00:11:42 hash tag so now if I reload this you see
- 00:11:47 now we don't have an hash taken if I
- 00:11:48 just enter slash users it stays at slash
- 00:11:51 users but nonetheless it loads my users
- 00:11:55 component so now we're using this nicer
- 00:11:58 URL mode to load that that was a lot of
- 00:12:02 talking but now in this video you saw
- 00:12:04 how to install the router how to add to
- 00:12:07 the application how to set up route how
- 00:12:10 to load these routes by entering them in
- 00:12:12 the URL and how to change the mode to
- 00:12:14 have nicer URLs now I'll have another
- 00:12:17 video on this channel the next video in
- 00:12:19 this playlist where we're going to have
- 00:12:21 a look at how we can navigate between
- 00:12:24 our our routes by using links and how we
- 00:12:27 can pass data around see you there
- 00:12:30 hopefully why