Made withVue.jsClip

Vuejs Tutorial #8 - Vue Router

L

LearnCode.academy

Creator on the Vue.js channel

Watch on YouTube ↗

99K viewsNov 21, 20178:29 runtime

Learn the fundamentals of client-side routing in Vue.js with Vue Router. This tutorial guides you through setting up Vue Router in a single-page application (SPA), explaining how it enables navigation without full page reloads. Discover how to define routes, use the…

Chapters

#vuejs#clip#frontend

What is Vue Router?

Vue Router is the official router for Vue.js. It enables navigation in a Single-Page Application (SPA) by mapping URL paths to specific Vue components, allowing the user to move between different views without a full page refresh.

Note
By default, Vue Router uses "hash mode," which adds a # to the URL. This leverages a browser feature that prevents a page reload when the part of the URL after the hash changes, making it ideal for client-side routing.

Core Setup and Concepts

When you initialize a Vue project, you can choose to include Vue Router. This sets up the necessary files and configuration.

router/index.js: This is the main configuration file where you define your routes.
main.js: The router instance is imported here and injected into the root Vue instance.
<router-view>: A component that acts as a placeholder in your main application template (e.g., App.vue). It renders the component corresponding to the current URL.
App.vue: Often used as a shell for the application, containing elements that should appear on every page, like a navigation bar and the <router-view>.

Defining Routes

Routes are defined as an array of objects. Each route object specifies a path, a name, and the component to render.

// In router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Friends from '../views/Friends.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/friends',
    name: 'Friends',
    component: Friends
  }
]

const router = new VueRouter({
  routes
})

export default router

Navigating Between Routes

To create navigation links, use the <router-link> component instead of a standard <a> tag. This prevents the browser from doing a full-page reload.

Use the to prop to specify the destination path.

<!-- In App.vue or another component -->
<nav>
  <router-link to="/">Home</router-link>
  <router-link to="/friends">Friends</router-link>
</nav>

Dynamic Routes and Parameters

You can create dynamic routes that accept parameters by using a colon : in the path. This is useful for things like showing a specific user's profile.

Route Definition:

{
  path: '/friends/:id/:age',
  name: 'FriendDetail',
  component: FriendDetailComponent
}

There are two primary ways to access these parameters within your component:

Using this.$route.params: Access parameters directly from the route object.
- this.$route.params.id
- this.$route.params.age
Using Props (Recommended): Set props: true on the route definition. Vue Router will automatically pass the route parameters to the component as props.

Tip
Passing route params as props is cleaner because it decouples the component from the router. The component simply receives props and doesn't need to know they came from the URL. This also makes the component easier to test and reuse.

Route with Props enabled:

{
  path: '/friends/:id',
  name: 'FriendDetail',
  component: FriendDetailComponent,
  props: true // This is the key!
}

Component receiving props:

<script>
export default {
  name: 'FriendDetailComponent',
  props: ['id'] // 'id' is now available as a prop
}
</script>

Introduction to Vue Router

In this video, we're going to look into View Router, which is going to allow us to navigate from different states in the application and still stay on the same HTML page. If you're new to single-page applications, this will probably be the strangest concept to you, so I'll give a couple explanations along the way for people where this is maybe the first JavaScript application you're building.

You can see what I've done is I've generated another Vue application. The only difference between the last video and this one is I said yes, install View Router. So if you look at the app view components, there's really only one difference. We're adding the router view here, and we're not doing anything else.

main.js imports Vue Router and then it adds this little thing right here, router, and that's basically how you configure Vue Router to be on your application. Import the router and then add the router. That's pretty much it. You import the router, add the router. And the router that it's actually importing is this right here, this file. So we'll get back to that file in a little bit.

Understanding Hash-Based Routing

So, you've imported the file, added it to our top-level component, and now let's actually look at that template. We get to choose where the router components print out. And you'll also notice that our app now has this little hash-slash at the top of it. This is going to be one of my tiny little side trails for newer people. So if you ever add hash and then some word here, HTML will look for an ID on the page called some word and it will scroll to it. So you can actually make a URL, any link on the page could link to #some word and that would actually scroll to the some word ID when you click on it.

But then developers learned along the way, hey, since it doesn't navigate to a different page, we can kind of hack HTML and add all this information here. And then we can listen for when that changes and tell a JavaScript application to go to entirely different pages and states and stuff. So that's basically what the concept of routing is, is we're going to add information up to that hashtag route. And there's an HTML5 way to do it too, but we won't cover that in this video. But as we add stuff to that route, JavaScript can pick up that and we can make the whole page change without navigating away.

How Router View Works

So there you go, that's routing for beginners. So here's what that router view covers. Is we can define a set of routes, and when you go to those routes, it will actually load a different set of components. So you can see here when you're on the slash route, just the homepage route, we're giving it a name, we're saying hey, that's the HelloWorld component. So that's the HelloWorld component right there. So if you go to just slash, it grabs the HelloWorld component and it spits it out in place of a router view. So that's kind of how routing works. Let's go ahead and define maybe another route here. Let's say, let's show you one thing here. So if I go to a fake fake path, then all you're getting is the top-level application at this point. You're getting App.vue, which is the div and the image, and this is returning nothing because there is no router view for this. This is basically returning no component at all. And then anytime you go to something that the router view recognizes, it's going to return that component, in which case this is the HelloWorld. So you use the app-level view for a shell for your application. Whatever is going to apply to your entire application goes in here, every single view state. And from there, you break down different things into views that router view can then return.

Creating New Routes and Components

So let's go and maybe, uh, you know, let's say we were making that friends list. Let's do a contact. We'll go friends. So that's our friends path. And then we could also make a contact path. And then maybe we can make an account path where you can manage your account or something like that. Contacts, accounts, just be the contact components, and this will be the account components. And you can get more complex than this. There we are. Let's go ahead now just make some new components here. Contact.vue. Let's go ahead and make this and we'll just leave that as that. Let's go ahead and save this also as the accounts and let's say this is friends. So change a couple h1s here.

So now if we go back to that router file we can import those files we just made. We can import accounts, I'm gonna import contact, and we can import friends. Everything should be working now.

Testing New Routes

So now if we go to accounts, we get the account component. There's our account H1. And we can go to friends. Whoops, looks like friends is the wrong component. Yes, we're importing friends from HelloWorld. Let's change that. There you go. Now #friends #slash/friends goes to the Friends components and contacts. So there we go. That's all of our pages.

Now let's go ahead and create some links here so we can actually link around to these different pages. If I go over to my App view now, I can go ahead and create some links by using the router-link tag. router-link and this is basically an <a> tag. So I can go to the friends and all I have to do is add a to and then I can basically give it the path I want to go to. I can go to /friends and let's also do /accounts and /contact. And I'm assigning these to the top-level application so that way every view I go to, will have this main level navigation. So now I can go to Friends, Account, or Contact. Excellent. That works well.

Implementing Dynamic Routes

I can also add extra details in here, so I could go /friends/1/2/3. Let's go and save that. So if I go to friends now, you can see it goes /friends/1/2/3, but there is no route that matches that. What I can do is I can come over to my router index and I can go /friends/:id/:age/:weight. I don't know, weight. Let's say the weight is particularly important. So now this would be the ID, the age, and the weight. That makes absolutely no sense that you would load a friend by ID and pass in an age and weight, but whatever. At any rate, we are passing this in and then we can then access those in the friends view. We can come in here and we can do route.params.id. And you see there's ID 1 gets spit out. And we can also access route.params.age and weight. That is a very light two-year-old.

Passing Route Params as Props

And there's another way you can do it if you want to validate that, by adding props in here. Then I can actually require those this way instead. I can add id, age, and weight. And you can also add validation to those, so you can require those to be certain types, which is pretty cool. And then I can come over here to my routes and all I have to do is say props: true and now those get passed in as props. So those get passed in as props and now I can just call these age, weight, and id. You see this will render out exactly the same. Let's refresh. Yep. So now if I go to a weight of five, age of 25, maybe a weight of 150, something slightly more realistic. All that information comes in from the route and gets passed automatically to the component.

So there's kind of the two ways that you can pull in those props. And using Vue Router, you can pretty quickly, again, notice the common theme with Vue is fast, fast, fast. If you need something fast and easy and the level of complexity is not super high, choose Vue. It makes it really easy. You can just crank stuff out quickly and easily with low level of coding complexity. So that's how you use Vue Router in the basics. It's a lot of fun to get an app going and moving along and that's about it.