Registering Routes

in the routes-array pass a JS-Object for every route

example - whole file:

import { createApp } from 'vue';

import App from './App.vue';

import { createRouter, createWebHistory } from 'vue-router';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/teams',
      component: TeamsList
    },
    {
      path: '/users',
      component: UsersList
    }
  ]
});

const app = createApp(App);

app.use(router);

app.mount('#app');

---

How Vue Router is configured

Inside the router directory, we find the index.js for our router. At the top of this file, we are importing the vue-router library.

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

And then we import a component we’ll use in our routes:

import Home from '../views/Home.vue'

And then we use this route:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    ...// Skipping this part, which we will come back to later
  }
]

The path indicates the actual route (the URL)./, meaning this is the root, the homepage of our application, and what people see when they go to the domain

name allows us to give this route a name so we can use that name throughout our application to refer to this route

component allows us to specify which component to render at that route. Note that Home was imported at the top of the file.

---

lazy-load

performance optimization

Route-level code-splitting - esp. if the app is large

for big projects -> load later.

{
	path: 'About',
	name: 'About',
	component: () => import('../views/About.vue')
}

https://next.router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk

{
    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')
  }

It’s importing the component differently. Rather than importing it at the top of the file like we did with Home, we are instead importing it only when the route is actually called.

this will generate a separate about.js file, which will only be loaded into someone’s browser once they navigate to /about.

The different Pages are stored in the views-Folder

---

Named Routes

makes it simpler to manage and change the routes

to can also take an object instead of a string

add a name property to ths routes in the route-config:

{
      name: 'teams',
      path: '/teams',
      component: TeamsList,
      children: [
        {
          name: 'team-members',
          path: ':teamId',
          component: TeamMembers,
          props: true
        }
      ]
    },

add params:

 computed: {
    teamMembersLink() {
      return {
        name: 'team-members',
        params: {
          teamId: this.id
        }
      };
    }
  }

you can also provide the same kind of object to this.$router.push()

Using Named Routes

router.js each of our routes has a name

instead of:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

We can write:

<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'about' }">About</router-link>

If the URL changes later, we’d only have to change that path in one place instead of everywhere in our app.

---