Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e13 – Vue Router

when a simple router is not enough for your view application or you're trying to build a single page application view router is the way to go before we get

started though let's talk about a single page app also known as an SP a so an SP a is a very popular way of building a website where the user is not required to update or refresh their browser

whenever they request a new page now this has become popular because of the use of web applications things like email clients for example you wouldn't want them to load everything that's

around it just because they're trying to view one of their emails that is a perfect example of a great use case of a single page app now with that being said single page applications do add a bit of

complexity into your project and they're a little bit harder to set up but once you're set up honestly it is no different than developing a regular website so view router is the official

router for view j/s so today we're going to be taking a look at how to get it installed in a project so the official documentation is under router view j/s org so definitely reference this

documentation for any additional questions or features you'd like to discover so I'm going to close this for now and what I have here is just a simple view CLI application it is a

completely fresh application I haven't done anything for it all I've done is just run the surf command so in a new tab we need to pull in view router and we do that by running NPM install view –

router this will pull in the view router package and plug-in into our application so now that we have that installed let's go ahead and start using it so in my application here we're going to start

with the main jas file the very first thing you have to do is and if you're not familiar with this is the way that view defines plugins view router is a plug-in for

view so to use a plug-in what you have to do is first and foremost let's import view router from and it's gonna be just view router view – router so now that we have that important now we need to use

it and that's the keyword that we're going to use we're gonna save you use and let's go ahead and use view router so this is basic retelling view that this is a plugin

that we want to use alongside with our view that we are importing up here at the top so the next thing we need to do is define some routes now if you watched the previous episode where we basically

created a router from scratch the next thing you know we need is routes so let's go ahead and create some routes and we can do it in several different ways we can actually do it like so where

we have routes that equal an array of routes but I like the notation where everything is a little bit more compact so what we could do is actually initiate a new view router and inside of that

then declare our routes so why don't we take that approach so we're gonna say Const router and this is going to be equal to a new view router right so we need to make an instance of view router

so we can start defining our routes now this is going to accept an array and inside this array the first key we're going to pass in is route and again this is no different than just declaring your

routes in a separate variable but this just saves you a little bit of lines but either way it would work so inside of here every route is going to need two parameters the first one is going to be

path and that's going to be equal to some sort of path meaning a URL that you want to visit and the second one is going to be a component meaning the component that we're going to load so

why don't we load hello world this is a component that just comes pre-installed with any view CLI application and if you notice up here at the top it did get imported for me automatically just a

feature of my IDE so the path that we're gonna add is just a slash meaning just your regular home page so now we've got our router we've got our routes but we haven't told view about it just yet so

simple way to do this is simply just the pass in router into our view instance so this router is belonging to this view router that we created up here okay let's take a look at it in the browser

if I hit refresh sure enough nothing seems to have changed but now we're actually routing now one thing you'll notice right away is the following is this right here so there is a pound or

hash tag right here at the top and this is due to the fact that browser support for single page applications isn't a hundred percent yet if you need to support older browsers

like Internet Explorer well if you just route it between pages it will actually refresh the page which kills the whole point of a single page application we don't want to ever have to reload this

entire page but rather we just want to load pieces or components of this page now if you don't have to support older browsers then we can turn this feature off and that's actually very simple to

do right after routes we can add another one for mode and the mode that we want is history mode now history mode is going to use push States to push different content into the site and

change the address bar for us without needing that hash which looks a little bit ugly so we can get rid of that go ahead and hit that and now we don't have that any longer again if we turn this

off and we go back to our page it will automatically always add that pound there it is you seem doesn't matter I cannot get rid of it but again if we use mode of history in that case then we can

get rid of it all together and we just get a nicer URL again the point of that is just for older browser support of single page applications awesome so why don't we create a new component and then

let's go ahead and create a new page so let's add a new view component here and let's just maybe call it tasks and inside my task controller I'm not gonna have anything but just some li items

will just say item 1 item 2 and item 3 okay very simple component nothing crazy okay I'm gonna actually copy this over and when I visit slash tasks I want to load my tasks components now up here at

the top it was imported for me automatically again just an IDE feature if you're not using an ID like me go ahead and add that line to the top otherwise your compiler is not going to

be able to find tasks so we're just about ready to test this but if we did right now it wouldn't work so let's visit the app dot view and right now we're loading hello world it's a

component but we are already loading it inside our app right inside our view component so let's get rid of this all together and what we need to put it in here is router view so router view is

what's going to tell the router where to put your component this is where you want it to place your component that's the point of router view all right let's actually check it out in

the browser now and there we go we do see our list now if we head back into just our home page then we see that other component and the component we're loading there is the hello world

component why don't we change this up a little bit just so that we know that we are loading this component then go ahead and get rid of everything and instead of a message why don't we just output hello

world and there we go so we have hello world component and then if we visit slash tasks then we have our tasks list now this image up here that's actually inside our app view

and it is right here we don't really need it so why don't we get rid of it so now when it refreshes then sure enough and then if we go back to just slash but right now the way that we're doing this

if you notice up here right where the refresh is you'll notice when I go to slash tasks it actually reloads the page so right now it's still not a single page application and the reason for that

of course is that we need to actually generate some links that view can tap into so why don't we create an imaginary navigation bar here with some unordered list elements so my first one might be

home and my second one is going to be tasks right just something for us to be able to click through so what we need to put in here is another view component element that gets added whenever you

pull in view router and that is router linked so let's copy this out let's add a new component router – link and inside router link that's what we're gonna put home so this is gonna take one attribute

and it's going to be the two attribute so where are we going here we're just going to slash similarly for tasks let me go ahead and grab that and let's add a new router link paste that back in and

this is going to go to slash tasks okay so back in our application now these have turned into links now pay attention up here right where the refresh button is let's go to home and

task notice how there's zero loading between these two we are not refreshing the page so we have successfully actually added some routes and we are actually in a single page application

this is the very basics of view router and how to get everything working but let's take it a step further what if we want it to pass some parameters let's say the following let's add a new route

here and this is a common thing let's say user and then we're going to need an ID of a user say ID 1 2 3 now we don't want a hard code 1 2 3 because obviously every user is gonna have their own ID so

sure 1 2 3 would work but 1 2 3 4 that doesn't work so this needs to be dynamic so very similar to how view assigns something unbinds it we can actually use the same notation of semicolon and then

maybe we can call it ID you can also call it user underscore ID whatever you like we'll just stick to ID for now so now view knows that this is actually a variable and not just a regular string

so when we create a new component and let's go back here and add a new view component for my user so this is a new component and all we're gonna do here is just very simple obviously we're just

trying to get this working so we're gonna go ahead and output out so how do we get access to this variable right here well very simple you're gonna reach for router dot params dot ID again

router is just a global instance of router the same one that we gave in here and then params meaning any available variables and then ID which is what's belonging to our ID right here if I

change this to user then of course I'd have to change this to user instead that's the connection there so we'll keep it at ID I'll put everything back to ID and now instead of tasks then of

course we're gonna use our new user component this user component did get imported up here at the top so let's go ahead and try this now in our browser before we do let's go ahead and add this

new route to our link's so user slash will just say one two three four now and then just call it user alright let's head back here let's see user alright that didn't work let's

go back here and check what happened okay it's not router its route so we're reaching out for route params ID and there we go now we're getting one two three so anything we passed in in here a

string also works through one two three four yep that all works so we are successfully fetching that now obviously in the real world at this point you would maybe fetch that users information

and show their profile or something like that but here it is that's how we get some variables so let's tackle one more thing and then we'll call it a day what about a route that doesn't exist right

so if somebody comes in here and just types in e gibberish well that's really supposed to be some sort of not found page so when we create a new component and let's call it not found and all this

view components going to be just an h1 that says not found so now my main is let's add a new route now we want to catch everything right everything that trickles down think of your routes as

the users up here and it's falling through these different routes so the first match that occurs will be the one that actually gets returned so at the very end this very last one what we

could do here is put an asterisk and this will basically just tell view router anything else if it all fails and it ends up over here go ahead and match everything and if it matches everything

let's go ahead and pull open that not found component not found that in put it up here at the top so keep that in mind so now when we come back here sure enough we get not found but all of our

other routes still work now the order of these routes is very important you want it to have that trickle effect so at the end is where you're gonna have your wildcards that way you don't

accidentally overwrite one of your other routes so that's pretty cool this is pretty easy to implement and again we have all of this working without refreshing the page not even once now we

still do have history so if we click through here you see that we still have history going on up here but again we're not reloading the page so everything is extremely fast

and easy for the user so that's the quick and dirty on getting view router working go ahead and play around with view router and when you're ready we'll move on to something else

Vue Router is the official plugin for creating robust single page applications. In this episode, we install and create a simple 3 page SPA showing the basics of routing with Vue Router.

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.