vue-router router-view does not give error but does not render

Question

vue-router router-view does not give error but does not render

Navigation

#1 by (0 votes)

0

I am apprehending Vue and I came across a problem. I installed vue-router via npm . When I call <router-view> , no error is indicated however the site does not render on the page. If I type the links in the address bar, the contents of the components are loaded.

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes'

Vue.use(VueRouter);

const router = new VueRouter({
  routes
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

routes.js

import Contato from './components/Contato.vue'
import Sobre from './components/Sobre.vue'
import Home from './components/Home.vue'

export const routes = [
  {path : '', component: Home},
  {path : '/contato', component: Contato},
  {path : '/sobre', component: Sobre}

]

App.vue

<template>
<div class="" id="app">
  <div class="container">

    <router-view></router-view>

  </div>
</div>
</template>

<script>
export default {

}
</script>

<style lang="sass">
@import "~bulma/sass/utilities/initial-variables.sass"
@import "~bulma"
</style>

vue.js

asked by anonymous 25.10.2017 / 02:21

1 answer

I have an app that uses menu tabs, one with products and another with promotions how could I implement a search in this type of menu? Error inserting Image in Readme.md on bitbucket

score 0 · Accepted Answer

The problem is that you forgot to inform the homepage (Component), we will rewrite this code, it follows step by step:

Create the main.js

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Create the file App.vue

<template>
    <div id="app">
        <router-link to="/">/Home</router-link> - 
        <router-link to="/contato">/Contato</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style>
</style>

Create the index.js file inside the router

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import Contato from '../components/Contato'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/contato',
      name: 'Contato',
      component: Contato
    }
  ]
})

Create the components within the components

Component Home.vue

<template>
    <div class="home">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
    name: 'home',
    data () {
        return {
            msg: 'Página inicial'
        }
    }
}

</script>

<style scoped>
</style>

Component Contact.vue

<template>
  <div class="contato">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
  name: 'contato',
  data () {
    return {
      msg: 'Página de Contato'
    }
  }
}

</script>

<style scoped>
</style>

You can see it working here at codesandbox .