Coding

ROUTING SETUP | VueJS | Learning the Basics

  • 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