38 Vue Router

Sarthak Shrivastava
A free video tutorial from Sarthak Shrivastava
Web Developer & Instructor
4.3 instructor rating • 10 courses • 66,558 students

Lecture description

  1. How to setup vue router in your vue app with best practices

  2. We will discuss how to add components to perform single page component change with route change.

  3. Include router.js file in your app.js file

Learn more from the full course

Real Time Single Page Forum App with Pusher Laravel & vuejs

Making Things Realtime With Pusher in Single Page App

11:33:07 of on-demand video • Updated November 2019

  • Create Facebook like Real time Notification and real time reply
  • Create Real Time Like/Dislike System
  • You will learn How to generate Json Web Token (JWT) in Laravel and how to login and logout with Token
  • You are able to use create API with Laravel
  • Able to use Vuetify along with Vuejs
  • Update : Use Laravel WebSocket package to make realtime system free
  • Update : Fixed Bug on lecture number 78
  • Pagination on questions
English So yes they have these tabs that means forum, ask question, category and login We will create these components but how we will switch between these components. Yes. For that we need the vue router. So let's grab the vue-router. So vue router we have to include that. So introduction, getting started. But before we have to install it install vue router this is here open. Terminal, create a new terminal and "npm install vue-router" So this is going to install. And while it's installing we will see how we can use it. To configure vue-router we need to import firstly view router. So let's copy this and we will firstly create the router.js file. We can use that on our app.js. we can use directly here but I don't want to use because we use lots and lots of component to and switch between components so it's better to create a new folder and a file router folder. So that should be a folder not a file. So router an inside router will create a file called a router.js and here I will paste it. So firstly importing vue from the vue and then vue router and using that vue router. And now let's go to documentation of vue router to see what next step is. So here if you scroll down you will see we have to create this kind of route's constant which really defined our parts of the component and the component itself. So let's define that here. So constant and these are the components which are not available in our case but we will fix that. And then we have to use this router. So let's call this. And after this we have to say like constant router is equal to a new router and then we can use that router in our original app which is inside app.js you can use that router here but how we will say that there is a router. So we have to import that route file so import router from we have to say like a router slash route router.js from this file we need to import that. And if I save this we can see that we have error This is because we are not exporting anything. So let's say export default that router. So if I now save Yes we can see we have build successful. So we have connected our router file this router.js to app.js and we have defined that router here. So this is good but as I have told you we don't have any kind of this component. So let's remove this one and I will call it like login and the path is login. But as we know we don't have this login component. So firstly if we have the component we have to import that but we don't have that. So why not comment this out and move forward in the next section we will start creating the different component and connect to the router. But before going let's push everything to github so git add all and git commit with a message of vuetify then vue router should be a router and initial components. This is we have done in this section and now git push it is done and upload it to the github repository and let's move forward to the next section.