So in this guide, we are going to create those two pages, integrate the routing and then make sure everything is working. So make sure you have the server running, by the end of this, we should be able to have a home page and then we should also have the ability to go to localhost:8080/dashboard and have that work.

Right now it's not going to give us an error and this is something that might a little confusing if you have never worked with Vue before. When it comes to routing you can go to any route that you want up here because technically routing in any kind of single page application is more of a mocked experience and what I mean by that is that in a normal application, you would have an index.html file.

If you had dashboard page, then you would have to have a dashboard.html file and you'd have to have html files for every single page of your application. But in a single page application, remember, we only have a index file so that is the only entry point into our entire application and so View doesn't really care what you put up here in the URL bar and so what we need to do and the way the routing system works, is it almost fakes the routes.

It simply is going to view what is up there, it's going to intercept that value and then it's going to run it across the list of routes that provide it and if it finds a route that matches with what we have listed, then it's going to show it. But if it doesn't, it's going to do exactly what you see right here where it just doesn't really do anything.

So that is something that is important to keep in mind, and we're going to be talking a lot more about routing as we go through the course, but I did want to mention that.

So if you switch over to Visual Studio code, let's build out these two pages. We're going to have the home vue which we already have and we also inside of the View's directory, we're going to create a new file here and let's call this one Dashboard.vue and then inside of here, we're going to add all of our code.

Now, if you have never seen my video on creating user snippets in Visual Studio Code, I definitely recommend that you look at it cause I am going to use the Snippet where I type VC and you can see that I have this custom user Snippet and if I hit return, it actually gives me all of the place holders hacks that you are going to need in order to build out a full vue component.

<template>
  <div>

  </div>
</template>

<script>
export default {
  name: ''
  data() {
    return {
    }
  }
}
</script>

<style scoped>

I'll put a link to that video in the show notes. But if not, you can pause the video right here and type out the template tag with the div inside, the script tag where we are exporting default with the name, the data element and then your styles down there so feel free to pause the video right now to type all that out.

But I definitely recommend for you to build your own custom user Snippet the way that I did and in fact, in the show notes, I'm even going to just put the entire user Snippet from VS code into it that I use so you can just copy it and paste it right in.

So I'm going to call this the dashboard because that's the component it is, and here for right now, I'm just going to put some placeholder text, hit save and that's all we need to do on that side.

Dashboard.vue

<template>
  <div>
    Dashboard
  </div>
</template>

Now what we can do, is we have our home and then we have our dashboard. Now let's go into our routing component, and for the route, I'm going to use one approach here and then later on, we're going to refactor it once we get into the router. Remember when we walked through this router.js file and I showed you there were two ways of importing files. The standard way, like we did with home right here and then lazy loading way.

For right now, I'm just going to do the standard approach and then when we get into the routing section, we're going to analyze each one of our routes and then we're going to pick and choose which ones we want to implement lazy loading with and which ones we want to keep just like this.

So for right now, you can just say import dashboard from dot, and this is something, if you have never seen this kind of path, this is just saying that I want to within, from the very beginning of the source directory, I want to access the views directory and then I want you to find dashboard.vue.

import Dashboard from "./views/Dashboard.vue";

So what we are doing here is we don't have access to that fancy little at symbol. That's something that is provided in a vue file but remember this is a standard vanilla JS file so this dot means I want you to start at the root and because router, if you look at where router is, it is in the root of the SRC directory so it's going to say, I want you start from this exact spot, I want you to climb over into the views directory and then find a file called dashboard.vue.

So we are going to do that and then I'm just going to create another route here. So make sure that you grab this entire object here and I'm just going to copy and paste it and so you want to have the curly braces and then a path and name and a component.

router.js

routes: [
  {
    paht: "/",
    name: "home",
    component: Home
  },
  {
    paht: "/",
    name: "home",
    component: Home
  }
]

Now this path is very important that you include a slash. If you did something like this and you just said dashboard, that would not work. It needs to be slash dashboard, it needs to be the full path to where we want them to go and the name. I'm going to call this just dashboard and the component is dashboard and make sure you do this one capitalized caused that is the convention to follow and that's also the component name.

Okay, so we have our dashboard imported into the routes and we also have that just with all it's basic kind of content so let's switch back and now, you can see because the server auto refreshes for us, you can see the dashboard is already working.

If I click on home, it take us back to the home page and then if I do dashboard, then it's navigating us to the dashboard page, so that is working perfectly. I'm not going to add a dashboard link up here with home. Not for right now because if you look at the design on the home page, it doesn't have a link to the dashboard, so we are not going to build that.

But we actually have now built the two pages for our entire application. Now obviously there are a million other things we still have to do including starting to build out the components that are going to go inside of each one of these pages but these are the only two actual views that we need to create and now moving on from this point, we're going to be focusing on building out the components that are going to be sliding inside of these views.

VS Code User Snippet for Basic Component

{
  "Vue Component": {
    "prefix": "vc",
    "body": [
      "<template>",
      "  <div>",
      "    $2",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$1',",
      "  data() {",
      "    return {",
      "    }",
      "  }",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ],
    "description": "Generates a Vue component"
  }
}

Resources

• Source Code
• How to Create Custom User Snippets in VS Code