Vue - Named Routes
and Router-Link
In this video you will learn why it is so important to use named routes in Vue and how to use them with link and router push.
Introduction
Hi I'm Oleksandr Kocherhin from monsterlessons-academy, where I'm teaching you how to become a developer or improve your skills of being a developer in learning by doing way. And if you are new here don't forget to subscribe and I will link everything that I'm mentioning in the description.
And just to remind you this video is a part of free series "Vue for beginners"
So let's get started.
Content
In previous video we already talked a little bit about router but now we need to dive deeper. So first let's look on or routes.
The first and the most important thing for me in router is this name property inside each route. What is it? It's an alias to use a route without using a path. For example here we have name Home. This means that everywhere in our application when we need a link or redirect in / path we can use this route by name Home and avoid using it by path. Why is it good? Because it may happen that at some point you want to change 1 path in another. If you used paths everywhere you need to update them everywhere by hands. By if you used name everywhere then you have only place to change and it is inside router.
Let's check this out. First of all let's write all our names lowercased because it's easier to use then.
Now let's add a link to home and users page inside App.vue. For this we need to use router-link component from Vue router.
<router-link to="/">Home</router-link>
<router-link to="/users">Users</router-link>
This is a bad approach because we need to change all places later if we want to change /users to /usersList for example.
Let's improve this with using name.
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'users' }">Users</router-link>
So here we are passing an object inside with name key. As you can see it works in the same way but we didn't use path directly. This is the correct approach to go.
The second most popular thing in router which we need is programmatic navigation. For example when you need to redirect user after successfull logic on when user clicked on the button.
And actually it's super simple because at the moment when we added Vue router to the Vue we got a possibility to use router in every component.
Let's add for example a redirect to homepage after we created a user. For this we need to jump in src/views/Users.vue
axios.post("http://localhost:3000/users", newUser).then((createdUser) => {
console.log("createdUser", createdUser);
this.users.push(createdUser.data);
this.$router.push({ name: "home" });
});
So we have $router property inside every component. And here we used push method from it to do a redirect to homepage. As you can see I wrote inside an object with the name so exactly the same that we wrote inside our link. In this case we are using the name alias and not the path.
As you can see in browser it is working as expected.
One more thing that I want to show you is $route property. So with Vue router we got not only this.router but also this.route. Let's check how much useful stuff we have inside. First of all let's console.log it in mounted.
console.log("initialized Users", this.$route);
As you can see we have everything that we might need: full path, name, query params and url params. And it's really nice to combine it with computed properties which we covered in the last video. If you didn't want it go watch it first.
computed: {
queryParams() {
return this.$route.query;
},
},
So here I create a new computed property query params which is based on this.route. This means that every time when to change query params of the page we are getting new queryParams inside our computed property which is really convenient.
Call to action
In this video you learned the most important stuff about using router and router-link.
If "Vue for beginners" is too easy for you go check my advanced course about Vue which is going 10 hourse and where we are creating together the application from empty folder to fully finished application. I will link it in the description below as well as my other courses.
If you find this video helpful, don't forget to subscribe to this channel and hit subscribe button. And I see you in my next video.