- Another way we can handle routing is with dynamic routes.
You can use this method when you're unsure of the name
of the route you want to create like
when you're dealing with dynamic data
or you try to fetch data from an API.
Let's see how this works.
To create a dynamic route you need to prefix the view file
or the name of the directory with an underscore followed
by the name you would like to give it.
The dynamic file tree can look something like
this code block.
When we create a dynamic page named _slug.vue
inside the pages directory,
it will automatically generate
the following route configuration we see on screen.
From this example we can show this in action
by displaying the route parameters or the name of the slug
directly inside the page using NOx routes objects.
Let's head over to the code editor
and see what that looks like.
Inside the pages directory I'll create a new file
and call this new file _slug.vue
To do that I'll right click here,
Choose the new file option and call that _slug.vue
Inside this file,
we'll create a baseline view component right?
That includes the templates,
the script section and the style section.
So to do that I will use this extension called Vito.
Now that we have that inside the templates I would add a div
and I want to display two things on this new page.
I want to add one heading that states that
this is dynamic route
and a paragraph as well.
and this would be a text stating that
hey this is the slug for this page,
with a column like that right?
Now with this if I head over to the browser,
here we see the index page.
But what happens when we try to navigate
to a new route like if you add a slug
to our URL what happens?
So if I add a slug let's say I had slug
that doesn't change right?
Even if I change it to something like apples or learning
it all still remains the same.
And the reason is because we created a dynamic route
but we don't have any dynamic data on the page
to make it change right?
But we can do that.
We can do something...
We can add something dynamic.
But first I would like to show you what's happening
behind the scenes.
So NOx use view router under the hood to manage routes
for your pages or components right?
If I inspect this page and head over to the view dev tools
and inspect the page this page you're currently on right?
By the way you can get this extension
from the Chrome extension store or firefox store.
If I inspect this page here you'd see I get
this route object here.
Now with this route object this is coming
from the view router by the way.
With this route objects you can see that I get the path,
the parameters and inside the parameters I have slug right?
So if I go back here and try changing this now
and do the same thing I just did again
not sure why it went off but do the same thing I did.
I would say that that also changes.
So now we have some dynamic elements on this page.
Now what I would like to do here is to pass
this slug right here inside our page.
And to do that we'll head over to the code editor
and here I'll pass in the route.params.slug
Now with this if I go back here you'd see
that I now get the name of the slug that I pass in
directly on the page.
And that's also makes it dynamic right?
So this could even apply for like when
you are fetching data from an API
and you want to have different slugs for different pages
you can also use this method to do that right?
So that's how NOx dynamic routes works.
It is also possible to have
what is called a dynamic nested route,
where you want a dynamic nested route
to have a dynamic parent with dynamic children right?
Here's what that would look like
if we want to create it.
Here we have a nested dynamic page called category
and a subcategory as a child of that component
or of that page.
Now NOx will generate routes that looks like this code block
for this page we created.
The result of this is a dynamically generated nested route
that resolves to a new dynamic page based
on the route specified.
Now you know the process of creating a route
when you're working with dynamic data
or data from an API.