Vue router example install#
Vue router example code#

Visting the given URL’s shows us that the router is now working! We only want to see how the router works. Just so we know what will be loading, the components are super simple. Note that we have our two components stored in the components directory like so. With all of this in place, we should now have two routes which will be working in our application. These components will be rendered in the App.vue file using the special built in component which ships with Vuejs. At this point, we need to decide where those components will actually be rendered. So far we have two different routes, and each route will display a given component when that particular URL is visited. Here is what that would look like:ĭesignate Where To Display Pages (Components) In order to use our new routes, we need to register them in the main.js file. The component is the page (actually component) which loads when you visit that url. The path represents what you see in the URL bar of the browser window.

After that, we can see two objects in the routes array. In the example above, we are importing those components into the routes file. PageOne and PageTwo are Vue components that represent a page. Import PageTwo from './components/PageTwo' Routes.js import PageOne from './components/PageOne'

Here, we will translate that idea into Vuejs code. When visit a different URL, a different page will load. When you visit one URL, a particular page will load. Pretend you are beginning a website, and you have two pages. This constant will hold an array, and the array is a collection of objects with each object representing a particular route. In the routes.js file, we can export a constant which will hold our routes. We can create a new routes.js file now for this purpose.

Vue router example code#

We can place our routes in a single location for good code organization. We will import the router, and we will specify to use the router. So first off, you can open up the main.js file. Now that we have the router installed, we can actually add it to the application and set up some routes. Once this completes, if you inspect package.json, you will see a new dependency for the router like so:Įxcellent! You have now successfully installed the Vue router into your project. Go ahead and type the following at the command line.

Vue router example install#

First, off let’s install Vue Router as it is not included by default with Vue itself. Before we get there however, we need to actually set up the router in our Vue project. You can almost think of each component as an individual web page. In other words, with routing we will be switching out different components in the application to achieve the desired effect. We recently talked a little bit about dynamic components in Vue, and this topic is related to our study of the Vue router. To accomplish this approach, we need to learn about the main building block of a single page application in Vue, and that is the Vuejs Router. Instead, the entire application is handled through Vuejs. With this approach, we are no longer loading a new page on each http request to the server and then attaching Vuejs to certain parts of the page. This gives the effect to the user of visiting different html pages, but in reality, it’s always the same page which is getting re-rendered. The URL’s do change in the browser window, however, Vuejs is actually just re-rendering this single index.html page as the URL changes. This single page is then used to simulate navigation to the user. It could be just an index.html file for example, which hosts a Vuejs application. In a single page application, there is only one page. The Router is the important feature of a single page application, since without it we couldn’t create one. In this tutorial we’ll take a look at the Vue Router, which allows developers to create SPA’s, or so called Single Page Applications. We’ve been covering a whole lot of information about the Vuejs JavaScript framework.