Coding

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