- 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