Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,720 --> 00:00:06,420
In this lecture, we're going to look at how we can use the router with decomposition API.
2
00:00:06,540 --> 00:00:12,300
All official libraries released by the Vue Dev team support the composition API.
3
00:00:12,330 --> 00:00:18,870
If you decide to use the composition API, you may need to use some of the methods and properties available
4
00:00:18,900 --> 00:00:20,370
by these libraries.
5
00:00:20,550 --> 00:00:22,650
We're going to start with a router.
6
00:00:22,650 --> 00:00:27,660
The router exposes information such as the root parameters or queries.
7
00:00:27,660 --> 00:00:32,580
We saw examples of how we might need these properties during the master project.
8
00:00:32,610 --> 00:00:37,050
The router comes with hooks for accessing its properties when we need them.
9
00:00:37,380 --> 00:00:41,220
In the resource section of this lecture, I provide a zip file.
10
00:00:41,220 --> 00:00:47,640
You can download, download it, unzip the files, install the dependencies and start the server.
11
00:00:47,640 --> 00:00:49,530
Pause the video if you need to.
12
00:00:51,780 --> 00:00:54,560
Let's break down what's in the starter files.
13
00:00:54,570 --> 00:01:00,160
The project contains the basic configuration for the router and view modules.
14
00:01:00,180 --> 00:01:05,670
If we look in the app component file, we'll find two links to the home and about page.
15
00:01:05,730 --> 00:01:10,290
Below them is the router view component to render the page content.
16
00:01:12,550 --> 00:01:17,320
Inside the views directory will find the components for both pages.
17
00:01:19,630 --> 00:01:23,950
If you look at either components, they're rendering static heading messages.
18
00:01:23,950 --> 00:01:29,460
There's nothing special about them other than that, nothing special is happening with our project.
19
00:01:29,470 --> 00:01:31,750
Let's view the project in the browser.
20
00:01:31,960 --> 00:01:35,540
We'll find the links with the page content below them.
21
00:01:35,560 --> 00:01:38,750
We can switch between pages by clicking on the link.
22
00:01:38,770 --> 00:01:40,360
So far so good.
23
00:01:40,720 --> 00:01:45,370
For this demonstration, let's attempt to make the about page more dynamic.
24
00:01:45,400 --> 00:01:48,640
Open the index file in the router directory.
25
00:01:50,960 --> 00:01:55,730
Let's update the about page to render information about a specific user.
26
00:01:55,760 --> 00:01:59,300
We'll start by updating the root for the about page.
27
00:01:59,330 --> 00:02:02,450
There are different ways we can make a root dynamic.
28
00:02:02,480 --> 00:02:06,150
The most common approach is to use root parameters.
29
00:02:06,170 --> 00:02:09,539
We'll add a root parameter at the end of the path.
30
00:02:09,560 --> 00:02:12,890
The name of the router parameter will be member.
31
00:02:15,250 --> 00:02:19,360
The root parameter we're creating will contain the name of the member.
32
00:02:19,390 --> 00:02:22,150
Let's open the about component file.
33
00:02:24,570 --> 00:02:29,110
We can access the root parameters through the dollar sign root object.
34
00:02:29,130 --> 00:02:31,610
This object is available in the template.
35
00:02:31,620 --> 00:02:36,510
We'll update the heading message to output the params dot member parameter.
36
00:02:38,850 --> 00:02:42,360
Next, we'll go back to the app component file.
37
00:02:44,680 --> 00:02:47,590
We're going to update the link to the about page.
38
00:02:47,590 --> 00:02:51,850
We'll update the link to point to a non existent member called Admin.
39
00:02:54,200 --> 00:02:59,130
If we get everything right, we should be able to view the name of the member on the page.
40
00:02:59,150 --> 00:03:02,660
Let's open the about page in the browser to find out.
41
00:03:05,120 --> 00:03:08,330
As expected, the name is rendered on the page.
42
00:03:08,360 --> 00:03:12,830
The way we write templates doesn't change with the composition API.
43
00:03:12,860 --> 00:03:17,920
The information about a route is accessible via the dollar sign route object.
44
00:03:17,930 --> 00:03:22,910
However, what if we wanted to access the route information in the setup function?
45
00:03:22,940 --> 00:03:25,280
This is where changes slightly differ.
46
00:03:25,310 --> 00:03:28,370
Let's go back to the about component file.
47
00:03:30,700 --> 00:03:34,180
We'll amp the script block to the component file.
48
00:03:36,490 --> 00:03:40,120
In the exported object, we'll define the set of function.
49
00:03:42,490 --> 00:03:49,780
In some cases we may need to access the router parameter in this function or we may need the query parameters
50
00:03:49,780 --> 00:03:50,950
if they exist.
51
00:03:51,130 --> 00:03:57,940
We don't have access to the dollar sign router object because it's exposed via the this keyword.
52
00:03:57,970 --> 00:04:02,200
If we want to access to the routing information, we'll need to use hooks.
53
00:04:02,350 --> 00:04:07,660
Previously we learned how to create custom hooks with the composition API.
54
00:04:07,690 --> 00:04:13,000
Hooks are functions that export properties and methods that we can merge with our components.
55
00:04:13,000 --> 00:04:14,110
Setup Function.
56
00:04:14,260 --> 00:04:17,920
The router library comes with its own set of hook functions.
57
00:04:17,920 --> 00:04:22,240
We can call to merge with our component at the top of the script.
58
00:04:22,240 --> 00:04:26,650
BLOCK We'll add an import statement for the Vue router module.
59
00:04:28,980 --> 00:04:33,480
The composable function will want to import is called use routes.
60
00:04:35,750 --> 00:04:39,510
Notice how the name of the function starts with the word use.
61
00:04:39,530 --> 00:04:45,350
It's common practice to add the word use to hook functions to help indicate that this function is a
62
00:04:45,350 --> 00:04:45,930
hook.
63
00:04:45,950 --> 00:04:52,340
It's meant to be called within a component setup function to merge additional functions and properties.
64
00:04:52,460 --> 00:04:57,290
The router library exposes its methods and properties through hooks.
65
00:04:57,590 --> 00:05:02,900
The hook we're importing will let us access the root object in our setup function.
66
00:05:02,900 --> 00:05:05,430
We'll declare a variable called roots.
67
00:05:05,450 --> 00:05:08,630
Its value will be the used root function.
68
00:05:10,920 --> 00:05:17,340
The root object will have the same properties you would normally find on the dollar sign root object.
69
00:05:17,670 --> 00:05:22,740
For example, let's say we want to use the member root parameter below.
70
00:05:22,740 --> 00:05:27,720
This function will long the root params dot member property.
71
00:05:30,210 --> 00:05:34,020
Let's refresh the page in the browser with the console open.
72
00:05:36,320 --> 00:05:37,400
In the console.
73
00:05:37,430 --> 00:05:39,470
The name of the member gets logged.
74
00:05:39,470 --> 00:05:40,370
Perfect.
75
00:05:40,400 --> 00:05:46,250
Hooks are probably the most common feature you'll find yourself using with the composition API.
76
00:05:46,580 --> 00:05:51,830
Most libraries will provide their own hooks we can use to extend our components.
77
00:05:51,860 --> 00:05:54,890
Let's explore another hook by the router library.
78
00:05:55,130 --> 00:05:59,270
The used root hook will expose information about the root.
79
00:05:59,300 --> 00:06:04,610
Other times, we may need to interact with the router, such as changing the current root.
80
00:06:04,640 --> 00:06:06,720
We'll need to use a different hook.
81
00:06:06,740 --> 00:06:12,070
Back in the editor, let's update the import statement for the Vue router package.
82
00:06:12,080 --> 00:06:15,560
We'll import a hook function called use router.
83
00:06:17,870 --> 00:06:23,150
The use router function will return an object we can use to interact with the router.
84
00:06:23,180 --> 00:06:27,900
It's the same as the dollar sign router object we worked with previously.
85
00:06:27,920 --> 00:06:32,100
In our setup function we'll create a variable called router.
86
00:06:32,120 --> 00:06:35,240
Its value will be the used router function.
87
00:06:37,510 --> 00:06:39,040
For this demonstration.
88
00:06:39,040 --> 00:06:42,130
We'll add a hash to the router below the log.
89
00:06:42,130 --> 00:06:44,830
We'll call the router push function.
90
00:06:47,070 --> 00:06:48,840
We'll pass in an object.
91
00:06:48,840 --> 00:06:51,940
The object will have one property called hash.
92
00:06:51,960 --> 00:06:54,780
Its value will be pound test.
93
00:06:57,080 --> 00:07:03,500
The push function, as we've learned, will update the router, primarily used to redirect the visitor
94
00:07:03,500 --> 00:07:04,760
to a different route.
95
00:07:04,790 --> 00:07:08,480
In this instance, we're adding a hash to the current route.
96
00:07:08,510 --> 00:07:11,390
Let's refresh the browser to view the changes.
97
00:07:13,560 --> 00:07:17,160
In the address bar, we can see that the hash has been added.
98
00:07:17,190 --> 00:07:24,030
The router library has exposed two hooks if we ever need information about the current route or interact
99
00:07:24,030 --> 00:07:25,060
with the router.
100
00:07:25,080 --> 00:07:29,930
It's important to know this stuff because it's likely that you won't be using view alone.
101
00:07:29,940 --> 00:07:32,010
You may need to work with the router.
102
00:07:32,340 --> 00:07:36,420
That's the basics of working with the router with the composition API.
103
00:07:36,450 --> 00:07:37,800
We'll leave it at that.
104
00:07:37,830 --> 00:07:41,610
In the next one, we'll continue with the composition API.
10216
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.