Vue router not rendering component on url change

Question

I am using vue router in my vite project to render the correct page/component based on the url. I am first using router-link to change the url, then specifying the page that should be rendered on that url. The url is changing but the page remains the same. I am not quite sure what I am doing wrong here

App.vue:

<template>
  <Login />
</template>

Login.vue:

<template>
  <div class="w-64">
    <p class="text-3xl mb-4">Login</p>
    <div class="flex flex-col bg-white p-4 rounded border border-grey text-left">
      <p class="mb-2">Username:</p>
      <input type="text" class="border border-black rounded p-1">
      <p class="mb-2">Password:</p>
      <input type="password" class="border border-black rounded p-1">
    </div>
    <div class="bg-[#99C8C2] w-1/2 rounded p-2 mx-auto mt-4 hover:opacity-70" @click="temp">
        Login
    </div>
    <p> Dont have an Account ?</p>
    <router-link to="/signup">
          Sign Up
    </router-link>
  </div>
</template>

router.js:

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import App from './App.vue';
import SignUp from './Pages/SignUp.vue'

const routes = [
  { path: '/',name: 'Main Page', component: App },
  { path: '/signup', component: SignUp }
];

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

export default router;

main.js:

import { createApp } from 'vue'
import './assets/style.css'
import App from './App.vue'
import router from './router'


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

I already have included my app.vue, which is just me rendering another component called Login in the template. I have added the main.js now — codeouz
– codeouz, Commented Jan 28, 2024 at 14:09

Boussadjra Brahim · Accepted Answer · 2024-01-28 14:12:54Z

0

You should add router-view component inside App.vue :

<template>
  <router-view></router-view>
</template>

answered Jan 28, 2024 at 14:12

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codeouz Over a year ago

should I place my login component inside router-view? I added it in but it still doesnt render the correct component on url change

yoduh Over a year ago

Do not place it inside. <router-view /> is a placeholder component, and is necessary for vue-router to work. Whatever route is currently being matched, that route's component (defined in router.js) will replace <router-view /> in the DOM. Likely you should give Login it's own route.

Collectives™ on Stack Overflow

Vue router not rendering component on url change

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related