How do I set up Vue Router in my Vue.js application?

How do I set up Vue Router in my Vue.js application?

To set up Vue Router, first install it using npm: npm install vue-router. Then, create a router instance and define your routes.

Can you show me an example of defining routes?

Sure! Here's a simple example:

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

How do I integrate the router with my Vue app?

You can integrate the router by importing it into your main.js file and passing it to the Vue instance:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

What if I want to add navigation guards?

You can add navigation guards by using the beforeEach method on the router instance. This allows you to control access to routes.