Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e12 – Simple Routing From Scratch

[Music] [Applause] [Music] [Applause]

[Music] for small simple projects view provides a nice way to do some routing and what I mean by that is of course every application is going to have several

different pages so you would expect to visit different pages and get different content however up until this point we have this concept of components but none of them really talked about how to

create some sort of navigation so that we can have different pages and that's what we're gonna be tackling today now there is an official view router which what it actually does is everything that

a server-side rendering would do but what we're gonna be tackling today is a very simple implementation of how to do routing in a view CLI application so let's jump right to it I still have the

code from our previous episode but all it is is just two components one of them is hello world which simply just says hello coders and the other one is this tasks dot view and all it has is just

three list items nothing crazy in there I do have my app dot view which is what we would call our maybe home page and this one is just our simple counter that we worked on in the

previous episode but this again would work with any number of components and of course you can have components inside of here and do all sorts of cool stuff with it or we're interested on in this

episode though is the routing aspect of view so if we look at this means a J's file we haven't really touched up on it just yet but it's a simple view application it's importing view it's

importing app which is our primary component and then it does have this production zip equal to false that's just some boilerplate stuff that view CLI installed for us don't worry about

that and then we renewing up a new view instance and we are rendering and then H is what we're going to render and we're simply rendering app obviously this component up here now we're going to do

that by doing amount on the ID of app so where is the ID of app you may ask that's inside view and that's right here so we are basically using that app dot view as our entry point for our entire

view application heading back here one simple thing that we can do is we can listen for window dot location let's take a look at our browser here and I'm gonna pull open console right

here in console we can say window dot location now this gives you an array and it's got a bunch of stuff in there but what we're really interested in is path name so dot path name there it is

so this right now is giving us just a slash because we are technically in the home page if we said home of course it loads the same page but now if we run window dot location that path name again

now we get this string of slash home so obviously you know all about the reactivity of view so we can actually bind into window dot location dot path mean essentially listening for changes

to location that path name and then rendering the appropriate component so let's take a look at how to do that so I'm in my main dot J's app right now we are again rendering app we'll leave that

in there for now but let's go ahead and add a data attribute now this is not a component so it is not a function that returns an object but it in itself is actually an object so it's just data

object a little bit different syntax here so watch out for that if we look at another data this is a component we have a function which returns an object in our main dot J s this data returns an

object not a function that returns an object the difference there as a quick side note is that in this manner this is a single instance of data shared with everything around it we wrap that view

if you have several instances of this app component each will have its own set of data and they don't share data so that's important for components because of course you wouldn't want the same

data in every single component it kind of kills the purpose of components to begin with so a little bit different syntax there watch out for that so we can say current route that's just the

name of a variable window that location dot path name same exact thing we did on the browser so now we're gonna have this current route so what we can do is we can route a

appropriately based around whatever the route is and we can do that with a computer property so we say computed then we'll have an object and inside the object we can call this whatever we want

how about we just call it current component and that's going to be a function and inside of here we're going to return something for now let's just put a string so we need to know somehow

grab this and somehow turn that into the appropriate route so what you could do up here is as a variable let's say routes we'll set that equal to an array and this is where we could do our

mapping so we know that the original page now that's giving me an error here so it might not work but let's see if it works window that location that path name there we go it did work so we know

that just a simple slash would be what will represent our home page so we can say slash we'll need to map that to let's say app in our case this is our very first route so we are mapping that

to this app view component right here so we have our very first route obviously we'll add many of these as we get more pages for our application so in my current component how do we translate

this well simple enough we're actually going to use routes which can be accessed basically as an array with bracket syntax and we are looking for this so we could just use the current

route because that is bound to window dot location dot path name so let's say this dot current route and that will return basically this alright so we have that but now we are still not rendering

it because we're simply still rendering just app so we're going to need to change this render function now the render function is simply a way to tell view what it is that it's supposed to

render now in its current form this is the new shorthand notation in its current form it really doesn't allow you to do what we need to do so we need to change it to the old syntax where we use

a function and a function will receive H and H is just the name of that variable that we're giving it is how the view community has been calling this you could literally call it

anything you'd want but we'll follow tradition and just say H so our render function is going to return so let's go ahead and execute H and then we need to pass it in our current component so if

we said this dot current component now we are passing this current component whatever comes out of this computer property to our H render function all right let's take a look at this in the

browser just to make sure will refresh and sure enough we're still running there's no problems there but now let's go ahead and visit maybe slash test and that doesn't work so this routing is

actually working for us but we just don't have that route so if we wanted to add this route we need to go back here to our routes list and let's add a new route so we'll

say test is gonna be our new route and that's gonna have to be slash test because if we go back here and we take a look at window dot location that path name again it does have that leading

slash so we need to make sure that our routes have the leading slash so slash test let's go ahead and map that maybe to this tasks view component so let's import that here at the top import tasks

from will have to go into components and then let's pull open tasks so we'll use tasks component and we should be good to go let's head back here and sure enough we get that rendered and if we go back

to the home page yep that's still working so we are essentially routing we have two routes and we are going through the whole thing let's add hello world as another route and let's say slash hello

is going to be equal to hello world now of course it is imported up here at the top for me automatically this is just a PHP storm feature so it is finding hello world and importing it

for me but you will have to add this manually when our missing a comma there we are good to go so now we can visit slash hello and we get hello coders again hello coders is coming from this

hello world view component and so we are essentially rendering each of these components now that's its own page so we can actually start to write a very simple

application that has some routing very simple to do again this is not view router the official view router does a lot more than this but to be honest for a lot of projects this solution is more

than plenty for what you're going to need all right so let's recap this whole routing situation here that we have set up for ourselves so first of all we are depending on window dot location dot

path name and if you remember this is gonna be everything that is up here so if we visited slash test slash test of course that page doesn't exist but we can always check what the location path

name is so if we need to grab that route and we want to add that as a route we can definitely add that as a route and now slash test slash test is a route so it doesn't matter what's up here as long

as it matches what window location path name is we can route something to it so just keep that in mind so then what we're gonna do is we're gonna assign that to current route this is just a

variable name you can call this whatever you like it's just a variable it's just a piece of data inside our view instance so we are using this data alongside with this routes object that we have up here

to map from addresses into components so every single component that we have gets matched up to an address so /hello matches to this component slash test Maps to the tasks component so each one

has an assignment and then all we're doing with a computer property is we are basically going into our routes and then we are basically just returning the component name for each of this routes

so we're passing in this and basically just translating it to App now another thing that we can do here as a small side note is something like a 404 so if we don't find a route let's just say

this is type some gibberish here we just get this blank page but you may want to show somebody a not found page or something like that so when we change one of these components tell you what

let's add a new component let's use one of the view component PHP templates here and we'll just call it not found and yes alright so in here we'll just have a div with an h1 that says not

found navigates back and maybe we can make that a link about that so aged Ref we're just going to navigate back and navigate back alright so we have this component not found so what we can do

here is let's go ahead and import that component up here so import not found from components not found that view it looks like I use double quote here let's just keep it the same let's go to single

quotes there alright no big deal there I just like the single quotes better alright so now that we have this not found now up here if it's not able to find this route we can give it an

alternative and we're gonna say pipe pipe and if you don't know what this means this just simply means or so we're gonna give you this or if this doesn't exist let's go ahead and pull open not

found instead and if we go back here now we have this not found navigate back and we can navigate back for our users so again let's go to an address that doesn't exist it says nope not found

navigate back so that's a nice fallback for us to grab any routes that the user tries to navigate to that we don't have in our routes list all right so let's keep going with the review so then for

our render function we had to turn this into an old-style function and we're going to accept H and H is just a function that we're going to execute and when we do we're gonna pass in whatever

the result is of this route so essentially we're gonna send in either app or task or hello world or hello world or in the case that doesn't find anything then not found component so

just like that we were able to route in our application and even catch any routes that we don't have registered pretty cool stuff go ahead and implement some pages in your project get familiar

with this routing process and like I mentioned before for a lot of projects this is more than plenty but we will explore the view router package because it's a very important aspect to know if

you're going to be writing any single page application and if you're not familiar with single page applications we're gonna learn all about them when we take a look at view

router so for now that's it for this episode when you're ready let's move on to the next thing

Let’s setup a simple routing implementation for our project using some clever javascript and Vue.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.