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

You may also like