- Read Tutorial
- Watch Guide Video
Now with that one in place and working. Let's go and let's add the next one. You probably are already familiar with how to do this. You simply need to import whatever the name of the component is. I'm going to say import "SearchResults" from and then just like we called the home page essay @ slash component's slash search results. import SearchResults from '@/components/SearchResults';
Since that's the name of the file. Then down in the routes, I'm just going to clone this route.
Here instead of saying path and then just the slash, I'm going to say path and then I'm just going to say search dash results. path: "/search-results" Now you could call this anything that you want. I'm going to say search-results because I think that that is a nice descriptive name. Now let's also add the proper component name so long as they search results and then for the components. This is also search results. Now let's save this.
Now we want to switch over into the browser and go up top. Right now we have just that slash, but I should also be able to say search results just like that.
Now you can see that that switches and if I go back to the root that is working.
That is all we need to do in order to implement our search results, and to add our second route. Now one other change I'm going to make is you may notice that we have this image right here and this is included in the app. Now let's go to app view here you may notice that this is where the image is being called.
I don't want to include that because if you remember from our front end implementation the logo is going to be brought in separately in each one of the components. I'm going to get rid of that image and I'm also going to delete it from the assets directory just because it's not needed.
So you know right click here and then press delete. That's all we need to do. So now everything should be saved if you come back. We won't have any errors or anything like that. It simply is not going to show it and then we have our search results right there.
Now that everything's working perfectly. Now we have the two routes that we're going to need in the application in the next guide we're going to start building out our home page view component.