> For the complete documentation index, see [llms.txt](https://devworkshops.gitbook.io/masteringvuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devworkshops.gitbook.io/masteringvuejs/beyond-the-basics/routing.md).
# Routing
### Installation
The easiest way to getting started with routing in an existing `vue-cli` application is by installing the router plugin. This will not only install the dependencies but also adding some sample code. To install the plugin, you can go to the `vue ui` and add it as below. An alternative is simple running in the command line `vue add router`.
Check what happened once the plugin was installed, a bunch of files where updated and some were created.
Let's see what we need to know about these changes. Two new components were created **About** and **Home**. They are going to be linked our first 2 routes which were added to **router.js**.
{% code title="router.js" %}
```javascript
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
}
]
});
```
{% endcode %}
> One thing to point out here is that the history mode is not set by the default which means that the URL will have the # when navigating to the different routes. In order to set the history mode, just add `mode: 'history'` into the Router configuration
Now that we have the configuration for the routing, we need to hook it up with the application itself and that's what happened in the **main.js** file
{% code title="main.js" %}
```javascript
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
// the router was added here from the import above
router,
render: h => h(App)
}).$mount("#app");
```
{% endcode %}
There's only one thing left, where do the components will be rendered when a route is loaded? This change happened in the **App.vue** along with an example on how to navigate through routes. The `router-view` is where the components will be rendered.
{% code title="App.vue" %}
```markup
```
{% endcode %}
For more information about routing, check the [official documentation](https://router.vuejs.org/), it's pretty comprehensive.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://devworkshops.gitbook.io/masteringvuejs/beyond-the-basics/routing.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.