# Vue Router

## Basic Routing with Vue Router

Vue Router is a powerful and flexible routing library that integrates with Vue.js to manage navigation in your application. It allows you to map URLs (or paths) to specific Vue components, creating a smooth and interactive user experience within a single-page application. Instead of navigating to entirely new HTML pages for different sections of your application, Vue Router dynamically renders components within the same page based on the URL.

{% code title="./router/index.js" %}

```javascript
const 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 %}

**`<router-view>` Component:** A special component provided by Vue Router. You place `<router-view>` in your template where you want the matched component for the current route to be rendered. It acts as a placeholder that gets dynamically filled with the component associated with the current URL.

**`<router-link>` Component:** The primary way to navigate between routes in your templates. It's similar to an `<a>` tag but prevents full page reloads and triggers Vue Router's internal navigation.

```html
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Component for current route renders here -->
  </div>
</template>
```

## History Mode

Vue Router offers two modes for managing the URL:

* **Hash Mode (default):** Uses the hash portion of the URL (#). URLs look like <http://example.com/#/path>. Simpler to configure, works without server-side configuration.
* **History Mode:** Uses the HTML5 History API for cleaner URLs without the hash (e.g., <http://example.com/path>). Requires server-side configuration to correctly handle direct access to routes and page reloads. Often preferred for user experience and SEO.

```javascript
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/user/:id', component: User }, //route parameters
    { path: '*', component: NotFoundComponent } //Catch all route
  ]
})
```

There is a caveat to using "History mode": Your server will no longer report 404 errors as all not-found paths now serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page.

## Nested Routes

```javascript
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
```

## Route Guards

As the name suggests, the navigation guards provided by `vue-router` are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.

```javascript
// Global navigation guard example
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})
```

## **Programmatic Navigation with Route Helpers**

You can navigate programmatically from within your JavaScript code using the router instance injected into your components.

* `this.$router.push('/path')`: Navigate to a new path (adds to history).
* `this.$router.replace('/path')`: Navigate to a new path (replaces current history entry).
* `this.$router.go(n)`: Navigate forward or backward in history (like browser history buttons).
* `this.$router.back()`: Go back one step in history.
* `this.$router.forward()`: Go forward one step in history.

```javascript
// Home.vue
export default {
  computed: {
    id() {
      return this.$route.params.id //using route params in methods or CP
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    goToAboutPage() {
      this.$router.push('/about');
    }
  }
}
```

## Full Docs

<https://router.vuejs.org/>


---

# Agent Instructions: 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:

```
GET https://mihai-gheorghe.gitbook.io/tic/vue-router.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.