ROUTE NAVIGATION & PARAMETERS | VueJS | Learning the Basics

00:00:01 welcome to this video great to have you
00:00:04 here
00:00:04 you probably watched my last video about
00:00:07 routing and I strongly recommend doing
00:00:09 so because this video builds up upon it
00:00:12 in this video we're going to have a look
00:00:14 at how we can use our router our routes
00:00:16 we already set up and navigate to them
00:00:19 using links and how we can also pass
00:00:21 data how we can pass parameters to our
00:00:24 routes so let's get started this is the
00:00:27 application as we have it right now we
00:00:29 get these slash users route and the well
00:00:32 main route just slash at the end where
00:00:35 we have the home component getting
00:00:36 loaded now it's nice that we can
00:00:39 navigate around by entering the right
00:00:41 path here in the URL but I think the
00:00:44 user experience would be a little bit
00:00:46 better if we would not only do it like
00:00:49 that but also have some links we can
00:00:52 click some some header you could say
00:00:55 well let's implement such a thing the
00:00:57 place to implement it is of course the
00:00:59 app view file which acts like a skeleton
00:01:03 which has our router do and which is
00:01:07 responsible for loading our routes or
00:01:10 rendering them here in this router view
00:01:12 place so here I want to add a navigation
00:01:14 and you could of course style this in a
00:01:17 much nicer way just clearly is pretty
00:01:19 ugly but it shows how it works and
00:01:21 that's the key thing here so I added a
00:01:24 horizontal line below the heading and
00:01:26 then let's say when I have a link and
00:01:28 this link shall lead to the home page
00:01:31 now clearly we could do it like that
00:01:33 just link to slash with text home and we
00:01:39 got a home link here if I click this it
00:01:41 reloads if I enter users click this we
00:01:44 go back to the home page but you
00:01:46 probably recognize that it always
00:01:48 reloads the page because we're always
00:01:50 sending a new request to the server and
00:01:53 the server gives us back the index.html
00:01:54 page that clearly is not what we want to
00:01:57 have because it destroys our whole
00:02:00 application state every time we navigate
00:02:02 around so that is not really a great
00:02:05 user experience instead it would be
00:02:07 great if we would never leave this
00:02:08 running application and just rerender
00:02:11 the part of the Dom which should be
00:02:12 rendered
00:02:13 that is what we're building a
00:02:15 single-page application for in the end
00:02:17 right well we can do this we get router
00:02:20 view to render or to mark the place
00:02:23 where the components shall get rendered
00:02:24 we got another important component we
00:02:27 can use router link now ultra link
00:02:31 allows us to create a link which will
00:02:33 basically be handled in the way where
00:02:35 there is no request sent to the server
00:02:37 instead the click is handled by the view
00:02:40 router anti component which shall be
00:02:43 loaded is loaded so here let's name at
00:02:46 home and in order to make this work we
00:02:49 need to set this to and an equal slash
00:02:53 for example side note you can also bind
00:02:56 to with we bind : or shortcut just :
00:03:01 and then also bind to some variable
00:03:03 holding the path here now since I do
00:03:05 enter the full path here anyways I don't
00:03:07 need that so I will just route you slash
00:03:09 but you can make this more dynamic by
00:03:12 binding to a property so that's the home
00:03:15 link let me also add a user's link where
00:03:17 I navigate to slash users and with that
00:03:20 if I save this now you can see it also
00:03:25 lets the appropriate component but you
00:03:27 can clearly see by watching this reload
00:03:29 I can hear it never reloads the page it
00:03:32 never sends a fresh request because it
00:03:34 shouldn't and it doesn't so this is a
00:03:37 much better way of navigating around
00:03:40 that is one important thing but now
00:03:43 let's also pass some data that would be
00:03:45 great wouldn't it and also how can we
00:03:47 navigate without using links because we
00:03:50 might have some places in code where we
00:03:53 want to trigger a navigation action when
00:03:55 some code is finished or when we
00:03:57 executed some code and not when you user
00:03:59 click somewhere well let's have a look
00:04:02 at both starting with D parameters we
00:04:05 can send parameters by simply adding
00:04:09 them to our URL so let's say here in
00:04:13 users we expect to get some parameter

00:04:16 some user ID even though it's called
00:04:18 users but still so here we expect some
00:04:22 ID or let's call it team ID so we want
00:04:25 to see all users of
00:04:27 one team and team ID like this of course
00:04:30 won't work let's give it a real ID like
00:04:32 let's say ten so we want to load the
00:04:34 team with the ID ten here just an
00:04:36 arbitrary example now in the users
00:04:40 template here we want to output this so
00:04:42 let's add a rapping div because we may
00:04:44 only have one root element here in the
00:04:46 template and there we shall have a
00:04:48 paragraph where we say team ID is and
00:04:51 then we want to output team ID something
00:04:54 like that
00:04:54 it won't work right now in the main dot
00:04:58 JS file we configure the routes we now
00:05:00 have to tell the viewer out rip that a
00:05:02 part of the URL of the path will be
00:05:06 dynamic will be a variable we do this by
00:05:09 adding slash : this colon is important
00:05:12 it indicates that the following word or
00:05:16 part is dynamic and then any name you
00:05:18 like for example team ID like this this
00:05:23 name years up to you you will be able to
00:05:25 extract the data by calling this
00:05:27 property later on so this tells DB
00:05:32 router that there is a dynamic path in
00:05:35 the app of you file we're passing 10 in
00:05:38 this position so we want to extract that
00:05:40 ten later on the missing piece is now in
00:05:43 the users hood view file here we want to
00:05:46 extract this now we can do this by
00:05:49 adding a script and your export our
00:05:52 default object this view J's object and
00:05:56 now how do we get that routing data here
00:05:59 well inside of our view instance we get
00:06:04 access to this route parents now the
00:06:08 clearly won't work here because well
00:06:11 that's it's just in the object right and
00:06:12 yet call this in some method but since
00:06:15 we have this dollar sign route property
00:06:18 here available and this is available
00:06:21 because we add a DBU router here as a
00:06:23 plugin this gives us access to dollar
00:06:25 sign route we can also access this in
00:06:29 our template so here I can just access
00:06:31 dollar sign route again dollar sign
00:06:33 route is made available by the view
00:06:35 router parents and on the parents we
00:06:38 know we call it team ID so
00:06:41 this team ID here of course has to match
00:06:44 the name gave it here now if I save this
00:06:47 and we go to our home page here and I
00:06:51 click on users again
00:06:52 it loads user slash Ken and you see team
00:06:56 ideas 10 here so this clearly works and
00:06:58 if I manually enter 12 here you see now
00:07:01 it outputs 12 but now I want to show you
00:07:06 a little gotcha you can run into you
00:07:08 let's add another link where we load the
00:07:12 team with tid 12 so users for team 12
00:07:15 and here we got users for team 10 should
00:07:19 be straightforward right if I click
00:07:21 users 12 or let's go to home first if I
00:07:24 click users at team 12 we see 12 if I
00:07:27 now click 10 we see 10 but now let's go
00:07:31 back to the application and enter a life
00:07:34 cycle hook here lifecycle hooks are
00:07:36 basically methods which are executed
00:07:38 automatically on a view instance when it
00:07:40 is created and so on you can learn more
00:07:42 about them in your official Docs you can
00:07:44 find a link to lifecycle hooks any video
00:07:46 description one hook is the created
00:07:49 method and this clearly shall not be
00:07:52 here excuse me we shall be in the users
00:07:54 of view file so created this method will
00:07:57 be executed by view chess whenever this
00:08:00 component here is created and here I
00:08:02 want to simply say alert and want to
00:08:05 output this route params params team ID
00:08:12 like this so let me save this and it
00:08:16 opened it on another window but it
00:08:18 opened it now if I click home and click
00:08:21 10 we see it again if I click 12 we
00:08:24 don't see it we see the URL change
00:08:27 we see it change in the template but we
00:08:29 don't get the alert I have to go to home
00:08:31 and back before we see that alert again
00:08:33 now why is that because view chess
00:08:36 manages the components very efficiently
00:08:39 when using routing it doesn't destroy
00:08:41 them just because we're switching
00:08:43 between 10 and 12 here it keeps the
00:08:46 component because it's the same
00:08:47 component why would it destroy and
00:08:49 recreate it that only cost performance
00:08:51 right so therefore it's a clever

00:08:54 behavior
00:08:55 that it doesn't destroy the component
00:08:57 instead it keeps it alive and only rear
00:09:00 Enders the parts of the dom which need
00:09:02 to rebury rendered that is generally a
00:09:05 good thing but it is bad if we have some
00:09:07 methods depending on that like here
00:09:09 where we execute some code in the
00:09:10 created method this is not executed
00:09:13 every time we switch the route now to
00:09:16 make this work we have to set up a
00:09:19 watcher so we add the watch property
00:09:23 here and in the object we set up that we
00:09:27 want to watch dollar-sign route we need
00:09:30 to enclose this in single quotation
00:09:31 marks because dollar sign is a special
00:09:34 character which is generally not allowed
00:09:35 in property names so now we can watch
00:09:39 this route property and here we write us
00:09:43 in es6 method style we get the
00:09:46 to-and-from parameter passed by UJ s
00:09:49 this basically just means to which route
00:09:52 are we navigating and from which route
00:09:53 are becoming well in here we can then
00:09:56 simply alert and say to params team ID
00:10:02 now if we do this and save this it'll
00:10:07 give me D Allah gave me the alert
00:10:09 off-screen but if I now click 10 we get
00:10:11 the alert if I click 12:00 I get the
00:10:13 alert because now we're watching this
00:10:16 route property which of course does
00:10:18 changed that was always the case but now
00:10:21 we're executing this code here whenever
00:10:24 it changes because we're watching it so
00:10:26 the component is not getting recreated
00:10:28 but we're still getting informed now I'm
00:10:32 going to comment it out for the last
00:10:33 piece of fingers or a code I want to
00:10:35 show you navigating from within your
00:10:38 code so any users dot view file let's
00:10:42 say we have a button and I want to go
00:10:45 home when clicking this button now
00:10:47 clearly we get this home link here right
00:10:49 but still let's say we want to do this
00:10:52 when we click this button so here I add
00:10:54 add click and then I execute the go home
00:10:57 method a method which I'll add down here
00:11:01 so in the methods object I have go home
00:11:04 like this and I could run X any code
00:11:07 there now here
00:11:08 basically just navigating so a link
00:11:10 would technically be the wiser decision
00:11:13 but let's imagine we would have some
00:11:15 other code here so how do we do this
00:11:18 here Lin well we can simply access the
00:11:21 router TV router and there we can push a
00:11:26 new route on that stack so to say
00:11:30 because can we can think of it as a
00:11:33 stack because we can use the back button
00:11:34 to remove the top-level element and go
00:11:37 back one page so we want to push a new
00:11:39 page on that stack and we decide which
00:11:42 page by entering a path here so let's
00:11:46 say just slash which you want to go to
00:11:48 just home
00:11:49 so we basically enter the same here as
00:11:52 an argument to push as we enter here as
00:11:55 an argument to our links here to the two
00:12:00 attribute now by doing this if I save
00:12:04 this and I click go home I'm back to the
00:12:06 home page but now I navigated from
00:12:09 inside my code
00:12:11 so with that you learned a lot about the
00:12:13 view router and if you want to learn
00:12:15 more you can find a link to the official
00:12:17 talks in the video description the view
00:12:19 router is very powerful but with this
00:12:22 video and the last video before that you
00:12:25 should have a solid understanding of how
00:12:26 routing works how you can set up routes
00:12:28 and how you can navigate around now
00:12:31 there is more to it and these talks
00:12:33 should get you started to really dive
00:12:35 deeper into that

You may also like