Rendering a component with router in Vue.js

Question

My first day with Vue. I initialized my app. I want to add a Login component, when I set routes in main.js, no page works.

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'

import Login from './components/Login.vue'

const routes = [
  { path: '/', component: App },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  mode: 'history',
  routes 
})

new Vue({
  router
}).$mount("#app")

Only works when I add render option to Vue object and renders the App component.

new Vue({
  router,
  render: h => h(App) // or Login
}).$mount("#app")

How will I ensure rendering route components?

Boussadjra Brahim · Accepted Answer · 2020-10-01 14:06:58Z

2

You should add router-view component inside your App component like :

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

answered Oct 1, 2020 at 14:06

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

2 Comments

tolga Over a year ago

Great thank you. Now, I can't see content of Login, what I see is only template of App.vue.

Boussadjra Brahim Over a year ago

you could visit the link youbaseUrl/login something like http://127.0.0.1:8080/login please check this full example

Collectives™ on Stack Overflow

Rendering a component with router in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related