Add Routing to Your Vue 3 Application With Vue Router

Instructor: [0:00] I'm going to open a new terminal window and npm install vue-router. With vue-router installed, let's create a new folder called router. On the inside of there, let's create an index.js file.

[0:14] We're going to import from vue-router, and there are two things that we want to import. We want to import the createRouter function, which is going to allow us to create a router. We also want to import the createWebHistory function, which is going to allow us to track the history of our user through our application.

[0:31] In a single-page application, we can't always depend on the browser history. We need to be able to push and pull from that browser history. We're going to import our components. The first component I'm going to import is our CraftList. We're going to import that from, from @components/CraftList.vue.

[0:49] Then, I'm going to have my route. My route is an array of objects. Each object has three possible keys. The first is the path, which is the browser path that we would navigate to inside of our application. The second is optional, but it's the name of the route that we're describing. The last is the component, the component in our application that is being rendered at this route.

[1:17] I'll create an about page so that we can see what's going on there, do some navigating between it. Component, create and import that later, but let's do that. We have our routes, now we want to create our router. Const router = createRouter, that function we imported above, and we need history, which we're using createWebHistory function that we imported above, and we need the route.

[1:42] The last thing we'll do is we'll export that router as our default export. Awesome. We've created our router. Let's quickly just create that about component. Now we'll go to our main.js file. We'll import our router from router. Then, in the chain where we've created our application, before we mount our application, we're going to use our router. We'll do .useRouter.

[2:10] Our application is using the router. Now, we need to tell Vue what to do with the results and how to navigate between them. We're going to add our router-view component here, which will render our router component.

[2:24] We're not going to have our craft list anymore. Instead, let's have a quick div that is just our nav. Instead of anchor tags, we use the router-link component, which takes an attribute of to. We want to go to "I'm home," which is going to be our craft-list component, and our router-link of to about, which is going to be our about component.

[2:44] Let's check our application now. We refresh the page, Home is here, about is our about page, and we can see we can flick between those. Feels like that "Welcome to the Kayak Store" shouldn't be in our in our component, so let's refactor that slightly. From CraftList, take out this "Welcome to the Kayak Store," and stick it there.

[3:03] Now, "Welcome to the Kayak Store" at home is also in about, so we've got that same thing going on.