Vue Router Load Issue

Question

I have installed vue router for my project, but the problem is that when clicked on button I see that url parameter changes but the page doesn't update. Or when I directly access the url, intended page doesn't load

Inside src folder there are 3 folders and main.js and App.vue

assets components router (inside of if there's index.js) views (inside of it there are PrivacyPolicy.vue and TermsAndConditions.vue)

** index.js**

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/policy',
    name: 'PrivacyPolicy',
    component: () => import('../views/PrivacyPolicy.vue')
  },
  {
    path: '/terms',
    name: 'TermsAndConditions',
    component: () => import('../views/TermsAndConditions.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Vue3Lottie from 'vue3-lottie'
import '@mdi/font/css/materialdesignicons.css' 
import { aliases, mdi } from 'vuetify/iconsets/mdi'

import router from '@/router/index.js'; // Import the router configuration


// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
  components,
  directives,
})



const app = createApp(App)
app.use(Vue3Lottie)
app.use(vuetify) 
app.use(router)
app.mount('#app')

** App.vue**

<template>
  <div>
  <AppHeader />
  <AppBanner />
  <AppMain />
  <AppFooter />
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader.vue";
import AppBanner from "./components/AppBanner.vue";
import AppMain from "./components/AppMain.vue";
import AppFooter from "./components/AppFooter.vue";


export default {
  name: 'App',
  components: {
    AppHeader,
    AppBanner,
    AppMain,
    AppFooter,
},
}
</script>

** PrivacyPolicy.vue**

<template>

Some text

</template>

<script>
export default {};
</script>

** TermsAndConditions.vue**

<template>

Some text

</template>

<script>
export default {};
</script>

Answer 1

Your code is missing a <router-view /> element.

The <router-view /> element is used to inject the current page.

The <router-link> element is used to redirect between pages. To define the path use the to attribute.

<template>
  <router-link to="/about"> Redirect to About on click </router-link>
</template>

To redirect programmatically import useRouter:

<script setup>
import { useRouter } from "vue-router";

function redirectToAbout() {
  useRouter().push("/about");
}
</script>