Laravel Routing & Vue Routing

As I mentioned before, we're going to let the View router package actually handle routing for our application. However, keep in mind that Laravel is still going to handle the initial authentication, so those routes still need to work. So let's jump right into the Web that file, and let's clean this up a little bit so we can get rid of just about everything here except this authentication routes and then this one singular route. However, right now it is a hardcoded Egholm. We want it to match everything else now in Laravel. Of course you can use a variable such as any and then we're going to hit some sort of controller will handle that in just a second. And then we don't need a name root. What we really need is to actually match everything. And to do that we could use a regular expression so we can say, all right, the variable, any meaning, anything that comes after the initial slash, it needs to match the following regular expression. And it's going to be a period meaning any character at all, and then an asterisks again in regular expression. This just simply means zero or more times. So match anything zero or more times. Basically everything, no matter what character it is, it is going to be matched and sent over into the home controller. Now, the home controller, to be honest, doesn't make a lot of sense that it's called home controller. What it really is, it is the app controller. So why don't we rename the home controller that ships with Laravel into app controller. So let's find it now. It's inside app HDP controllers and here it is. So let's go ahead and rename this to App Controller instead, and then we'll go ahead and rename the class. So notice it renamed it right here for us. Great. In our constructor, we are of course, requiring authentication and we will need this. However, right now we don't really have a way to register user and sign in and sign out. As a matter of fact, we stripped out the entire front end of Laravel, so right now it wouldn't even really look right. So we'll go ahead and comment this line out just for the time being. We'll get back to this and we'll turn it back on when we are ready. Now, this all it does is it hits an index method and then just returns a view of home. So let's go ahead and visit that home, that blade, that peafowl. And we have all of this code right here. Now, to be honest, we don't need any of it. We can actually get rid of the entire block. All we really care about is the fact that it is extending a layout and then we have some sort of content area. So in here, I'm going to have a new view component, which is going to be app appropriately named because, of course, our entire app will run off of this one view component. But so far we haven't even installed all of our dependencies. If you look through here and look inside the note modules, there's only a handful of modules in here. We have not installed the entire package, that JSON file. So to do that, let's go ahead and run NPM install. Now, this process can take a couple of minutes. So let's jump back and just keep working on our code. OK, so back into our home, that blade, that file, we are requiring this app component, but it doesn't exist yet. So let's go ahead and make that happen in the resource directory, inside JS, inside the components directory. Let's go ahead and create a new view component called App and then inside of app. For now I will just say hello just so that we know we are in fact loading that app, that view file. But of course it doesn't work unless we actually register. However, this app, that JS file, well, it's really set up for the way Laravel does things. We're going to have to do some heavy modifications to it. So let's start off by deleting all of these comments. And we actually are not going to load view into the whole entire window so we can get rid of that line. This example component, of course, is going to go. We're not going to need that. And for now, we will leave this view app. But of course, some modification of this as well is required. So right now, view doesn't exist. So let's go ahead. An import view from view. OK, so view is available to us because, of course, the installation finished in the background so we can head back and continue working. So the next thing I know I need is this view router. However, if we put all of our roots inside this one app, that JS file, then it would get very, very cluttered. So why don't we make a dedicated router file instead? So let's create a new JavaScript file called Router that JS and inside of here, this is where we're going to put all of our roots that way, very similar to the way we have the web that be in level application. We'll have this router that JS meaning this is where all of the roots are going to live. So let's go ahead and import that router file into our app digest. So we'll say import router from and this is going to be right in the root directory. Just router that. OK, so let's take care of this router right now. So first and foremost, we're going to need view, so let's go ahead and import view and then we're going to need the view, of course. So import view router from view dash router. There we go. Great. So the next thing we need to do. Of course, the view router is a plugin. So in view to use a plugin, we use that exact same keyboard. So we'll save you dot use. And then what are we going to use? We're going to use the view router. Great. And that's it. At this point we can actually just export default. New view router. And this is a very basic view router at this point. So it's ready to accept routes. So we're going to have some sort of route's object. And then just for simplicity's sake, if you're not familiar with the router, the router has a backwards compatibility mode that will actually allow you router to work in older browsers. However, it adds a hash or a pound in front of every single address. So it's really not desired. It doesn't look as good. So to turn that off, you're going to say that the mode is going to be history. This will turn off that feature now, this does turn off some backwards compatibility, so if you're still trying to meet older browser standards, this mode should not be used. However, for most modern applications that are going to be SPEEA, this may even become the standard. So the mode of history, just so you know, as a back story, it actually uses push state and push states is just not available in older browsers. So it just wouldn't work. OK, so why don't we add the very first root? So this will actually need to be inside an array and then we're going to have a new object in here and it's going to say, for example, path, and that's going to be the path that we're going to visit. And then it also needs to have a component that we're going to load. Right. So let's go ahead and pull up component. And right now, we don't have any components, but level does ship with this example component that view files. So why don't we use that? We'll say example component. Now, notice that storm automatically imported that up here at the top. So we have example component and we're just using it. And the path let's just put a slash, meaning just a regular home page as a home page. We're going to load this example component in our browser. OK, so, so far, so good. We're almost done now back in the app, that JS file. Yes, we are importing this router, but we're not using it anywhere inside this application. So let's go ahead and pass that into our instance of view. OK, so I think we are ready. So what we need to do now is go ahead and compile our code. So we'll say NPM run and let's go ahead and put up the watch. That way it continues to do the watching for. Now, this is the very first time that we do it. So Laravel Mix is going to need to do a little bit of homework to make it work. So let's let it do its thing and we'll be right back. And there we go. We are good to go. So let's go ahead and pull up the browser and visit our project. So we have our project pulled up, but we must have gotten an error because I don't see that example component. So whenever something like this happens with the JavaScript, of course, the best way to do this is to use the console just to see what sort of errors get sent back to us. So to access the console, you can right click and then click on inspect and then we can browse over to the tab that says console. And so we get a view warning unknown custom element app. Did you register that component correctly? We must have forgotten to do that. So let's go ahead and go back to P Storm, go into at that gas. And sure enough, we are not telling our view instance about this App View component. So let's do that now. Let's add a new section here for components. And then instead of here, we'll go ahead and use the app component. And of course, we'll have to import that at the top. So we'll say import EBP from components app. OK, so now the wotcher that's running behind the scenes will recompile our code. We can head back to Chrome, hit refresh and there we go. So now we are loading. Hello. So remember, hello, as in each one, of course, is what's coming out from our app view right now. So so far, we actually haven't loaded this route just yet because we don't see the example component just yet. And the reason for that is because inside this app, there's no where we're actually telling it to go ahead and display any of the components that the router loaded. So to do that, let's go ahead and wrap this whole thing inside a div, then we'll have that hello just yet. But then, of course, we have the router view. Router view is a special component that gets added to your project automatically whenever you're using the view router. So it's safe will let the compiler do its thing. Let's head back to refresh and sure enough, example component now loads up. However, if we go to log in, we still are able to pull up the login page for Laravel. So that's how the project is going to work. We're still going to have the authentication routes, but everything else will still get routed through our view router instance.