CODEWITHSUNDEEP
javascriptvue.jsvue-router
HardLuck
HardLuck

Reputation: 1577

Vuejs router cant reach any components

I might be using some outdated guide and this might be the result of it, new to Vuejs.
My App.vue:

<template>
  <div id="app">
    <img src="../assets/logo.png">
      <router-view/>
    </div>
</template>

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

<style>
  #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
</style>

My main.js:

import Vue from 'vue'
import { App } from './app'
import router from './router'
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import { routes } from '../app'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: routes
})

And then comes the app/routes.js

import accounts from './accounts'
import budgets from './budgets'
import transactions from './transactions'

export default [...accounts, ...budgets, ...transactions]

Finally, app/accounts/routes.js

import * as components from './components'

export default [
  {
    path: '/',
    component: components.AccountsListView,
    name: 'accountsListView' 
  },
  {
    path: '/accounts/create',
    component: components.CreateEditAccounts,
    name: 'createAccounts'
  },
  {
    path: '/accounts/edit',
    component: componenets.CreateEditAccounts,
    name: 'editAccounts'
  }
]

For some reason I can’t hit any of my components, for example if I go to localhost:8080/accounts/create then I end up on index page with the changed url instead of hitting the corresponding component. Is there anything obviously wrong with what I am doing?

Upvotes: 1

Views: 77

Answers (2)

Morty Choi
Morty Choi

Reputation: 2540

main.js:

import Vue from 'vue'
import { App } from './app'
import router from './router'
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

Maybe you are using the runtime-only build of Vue where the template compiler is not available.

Edit#1

App.vue

<template>
  <div class="App">
      <router-view />
  </div>
</template>

Then maybe you haven't include router-view in your App component.

Upvotes: 1

Richard Matsen
Richard Matsen

Reputation: 23463

For this export

export default [
  {
    path: '/',
    component: components.AccountsListView,
    name: 'accountsListView' 
  },
  {
    path: '/accounts/create',
    component: components.CreateEditAccounts,
    name: 'createAccounts'
  },
  {
    path: '/accounts/edit',
    component: componenets.CreateEditAccounts,
    name: 'editAccounts'
  }
]

Since the routes array is the default export, you would need to use this import.
The object style import is applicable where there are multiple exports.

import routes from '../app'

Ref: MDN web docs - export

Upvotes: 1

Related Questions