Vue Js Router and Routing
Vue Js Router. Routing is one of my favorite things about Vue. Vue Router is an extremely sophisticated package that is maintained by an official Vue team. It helps in displaying pages according to the path requested. It also has middle-ware features that can help you run code before each or specific routes. I am assuming you have some basic understanding of Vue or have read earlier topics from this series.
The router.js file
The router.js file handles all the configuration needed to run the vue-router. The vue-router, in turn, allows you to grant access to or restrict the user from visiting several paths with middle-ware. You can access query parameters with the $route object. The router.js file initially looks like this.
We will be changing some code in this file and that should help you understand some stuff about routers. But first, let us have a quick look at the structure of the router object. We can see that the router.js file exports a new instance of vue-router. Let us see what are the elements of this instance.
- Mode: The mode defines how the router handles URL. It can be set to history to allow normal URL handling. By default, if you do not set the router mode to history, it handles all URLs with a # delimiter acting as the entire website is just one page with different pages as different sections referenced by IDs.
- Base: The router base defines the base URL relative to which all URLs will be available.
- Routes: The routes property contains the actual routes and corresponding components that need to be displayed. As you can see above, it is an array of JSON objects.
Let’s make some Changes
If you’ve been following the series, then you know the drill. I will post a screenshot of the code and i want you to physically reproduce it on your systems letter by letter.
router.js
Replace the current code in router,js with the following code.
We have added a total of 2 new routes, so that makes 4 routes for our application. Let me quickly tell you what each property in a routes object stands for.
Path: This is the literal path that we have defined. When the user requests the value of the path key a corresponding component is triggered. You can see that line number 13 shows a colon before the name of the path. This tells vue-router that the particular path is dynamic as we will have different values all leading to the same page. Just like a profile page. Also, the last path is *, This simply instructs vue-router what to do in case no other routes are matched.
Name: Each route needs a name, this helps in identifying routes that work with or without the existence of dynamic values.
Component: The component property tells vue-router which component to render once the route has matched.
Meta: The meta key comes very handy when running middle-ware for authentication and other purposes. Though meta keys can contain just about any variable, I have kept it simple by using strings.
If you’ve followed everything up until now, you should see that there are some errors on your terminal screen from where you are running the vue app.
It is pretty evident, we assigned components to routes that do not actually exist. So the next step is creating those pages or components.
Creating Pages for Routes
It is very simple. For now, just create the following files with the codes inside in the views directory.
not_found.vue
settings.vue
user.vue
Pretty simple so far, No fuss at all. Now. We will begin initiating our tests, as we planned earlier. If you’ve followed everything up until now, should have no problems. So let us have a look at the pages in our application.
user.vue
Firstly, let us see the user page. I hope you remember we had added a dynamic variable to it called user_name. I will be visiting the URL localhost:8080/Rishabh since Rishabh is my name.
BAM !!, You can see that i have been greeted with a Welcome Rishabh message, you can surely try this with your name as well. Remember the mustache tags {{ }}, you can see in your user.vue file that we have merely used the $route.params.user_name variable to display it. That is the power of dynamic variables.
settings.vue
Let us quickly see what this page has got to offer us. The screenshot from the same is below –
It says that this page is only for logged in users. Strange, How were we able to access it then ?. Who is going to keep a check on whether the user that is requesting a page is logged in or not? This is where router middle-ware comes in.
What is a router middle-ware?
A router middle-ware is a piece of code that will run before each or some specific route is resolved. Up until now, we were only concerned with serving pages to routes, but now we will restrict pages. Doing this is simpler than you think. You already have the router.js file written. We just need to make some modifications to it.
We need to assign the Router instance to a variable named router and export it as default on line 20. Also, what we have done is added a middle-ware, this is called the before Each middle-ware. It is basically a function that runs every-time a new route is requested. It has 3 parameters, called to, from and next.
- To: The to parameter contains the route that the user has requested.
- From: The form parameter contains the information of the route that the user is coming from.
- Next: This is a function that will tell which route needs to be rendered. It usually takes a parameter that tells the router which route to redirect to. If left empty, the router will simply render the path requested.
In the function itself, we have simply checked which routes have a meta tag that contains the word auth. If it contains the word auth, we will redirect it to the / i.e the root path. Needless to say for complex apps you can write more logic and call your API servers to check if a user is logged in.
Conclusion
The Vue-router is a very sophisticated routing package that helps manage to route for Vue apps. We discussed features such as dynamic routes and middle-ware that help make complex routing possible. I hope you have understood enough routing to implement complex routing yourself. If you need help regarding this topic, drop it in the comments section and I’ll be there for you.
