Vue - Named Routes and Router-Link
Vue - Named Routes and Router-Link

In this videos you will learn about routing in Vue and how to use it correctly.

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"http://localhost:3000/users", newUser).then((createdUser) => {
  console.log("createdUser", createdUser);
  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.

If "Vue for beginners" is too easy for you go check my advanced course about Vue which is going 10 course and where we are creating together the application from empty folder to fully finished application.

📚 Source code of what we've done