Original subtitles

In this lecture, we're going to look at how we can use the router with decomposition API.

All official libraries released by the Vue Dev team support the composition API.

If you decide to use the composition API, you may need to use some of the methods and properties available

by these libraries.

We're going to start with a router.

The router exposes information such as the root parameters or queries.

We saw examples of how we might need these properties during the master project.

The router comes with hooks for accessing its properties when we need them.

In the resource section of this lecture, I provide a zip file.

You can download, download it, unzip the files, install the dependencies and start the server.

Pause the video if you need to.

Let's break down what's in the starter files.

The project contains the basic configuration for the router and view modules.

If we look in the app component file, we'll find two links to the home and about page.

Below them is the router view component to render the page content.

Inside the views directory will find the components for both pages.

If you look at either components, they're rendering static heading messages.

There's nothing special about them other than that, nothing special is happening with our project.

Let's view the project in the browser.

We'll find the links with the page content below them.

We can switch between pages by clicking on the link.

So far so good.

For this demonstration, let's attempt to make the about page more dynamic.

Open the index file in the router directory.

Let's update the about page to render information about a specific user.

We'll start by updating the root for the about page.

There are different ways we can make a root dynamic.

The most common approach is to use root parameters.

We'll add a root parameter at the end of the path.

The name of the router parameter will be member.

The root parameter we're creating will contain the name of the member.

Let's open the about component file.

We can access the root parameters through the dollar sign root object.

This object is available in the template.

We'll update the heading message to output the params dot member parameter.

Next, we'll go back to the app component file.

We're going to update the link to the about page.

We'll update the link to point to a non existent member called Admin.

If we get everything right, we should be able to view the name of the member on the page.

Let's open the about page in the browser to find out.

As expected, the name is rendered on the page.

The way we write templates doesn't change with the composition API.

The information about a route is accessible via the dollar sign route object.

However, what if we wanted to access the route information in the setup function?

This is where changes slightly differ.

Let's go back to the about component file.

We'll amp the script block to the component file.

In the exported object, we'll define the set of function.

In some cases we may need to access the router parameter in this function or we may need the query parameters

if they exist.

We don't have access to the dollar sign router object because it's exposed via the this keyword.

If we want to access to the routing information, we'll need to use hooks.

Previously we learned how to create custom hooks with the composition API.

Hooks are functions that export properties and methods that we can merge with our components.

Setup Function.

The router library comes with its own set of hook functions.

We can call to merge with our component at the top of the script.

BLOCK We'll add an import statement for the Vue router module.

The composable function will want to import is called use routes.

Notice how the name of the function starts with the word use.

It's common practice to add the word use to hook functions to help indicate that this function is a

hook.

It's meant to be called within a component setup function to merge additional functions and properties.

The router library exposes its methods and properties through hooks.

The hook we're importing will let us access the root object in our setup function.

We'll declare a variable called roots.

Its value will be the used root function.

The root object will have the same properties you would normally find on the dollar sign root object.

For example, let's say we want to use the member root parameter below.

This function will long the root params dot member property.

Let's refresh the page in the browser with the console open.

In the console.

The name of the member gets logged.

Perfect.

Hooks are probably the most common feature you'll find yourself using with the composition API.

Most libraries will provide their own hooks we can use to extend our components.

Let's explore another hook by the router library.

The used root hook will expose information about the root.

Other times, we may need to interact with the router, such as changing the current root.

We'll need to use a different hook.

Back in the editor, let's update the import statement for the Vue router package.

We'll import a hook function called use router.

The use router function will return an object we can use to interact with the router.

It's the same as the dollar sign router object we worked with previously.

In our setup function we'll create a variable called router.

Its value will be the used router function.

For this demonstration.

We'll add a hash to the router below the log.

We'll call the router push function.

We'll pass in an object.

The object will have one property called hash.

Its value will be pound test.

The push function, as we've learned, will update the router, primarily used to redirect the visitor

to a different route.

In this instance, we're adding a hash to the current route.

Let's refresh the browser to view the changes.

In the address bar, we can see that the hash has been added.

The router library has exposed two hooks if we ever need information about the current route or interact

with the router.

It's important to know this stuff because it's likely that you won't be using view alone.

You may need to work with the router.

That's the basics of working with the router with the composition API.

We'll leave it at that.

In the next one, we'll continue with the composition API.