CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
tolga
tolga

Reputation: 2830

Rendering a component with router in Vue.js

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?

Upvotes: 0

Views: 1066

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

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

Upvotes: 2

Related Questions