score:2

Accepted answer

like all the other answers, there are so many things wrong with this code.

firstly, there is a routes.js file, but it's not being used.

i've created a sandbox version of your code https://codesandbox.io/s/z22rx97z24 to show you a working version of the router/app.

what's changed?

firstly, you should export an instance of the vue router in the routes.js not just define a const. this is the recommended way of routing in vue.

import vue from "vue";
import router from "vue-router";

import app from "./app";
import login from "./components/auth/login";
import logout from "./components/auth/logout";
import register from "./components/auth/register";

vue.use(router);

export default new router({
  routes: [
    {
      path: "/customers",
      name: "customers",
      component: app,
      meta: {
        requiresauth: true
      }
    },
    {
      path: "/login",
      name: "login",
      component: login,
      meta: {
        requiresvisitor: true
      }
    },
    {
      path: "/register",
      name: "register",
      component: register,
      meta: {
        requiresvisitor: true
      }
    },
    {
      path: "/logout",
      name: "logout",
      component: logout
    }
  ]
});

secondly, you import that instance into app.js and assign into the router property of the vue instance.

import vue from "vue";
import vuerouter from "vue-router";
import router from "./routes";

vue.use(vuerouter);

const app = new vue({
  el: "#app",

  router: router
});

you keep components out of your app.js where possible. this allows you to do things like on-demand resource loading inside your router.js etc.

score:0

you seem to have mixed up some code in your app.js file.

specifically, your problem is here...

  { path: '/login', component: login },

you don't have a login symbol defined anywhere. you're also defining some global components which i'm not sure you want to do.

what i think you want is to remove all this...

vue.component('login', require('./components/auth/login.vue').default);

const router = new vuerouter({
    routes: [
         { path: '/login', component: login },
         { path: '/register', component: register }
    ]
})

and replace it with

import { routes } from './routes'

const router = new vuerouter({ routes })

i'm also a little suspicious of

require('./bootstrap');

but you haven't said what bootstrap is so i'll leave that with you to figure out.

score:0 

import routes from './routes.js'
const router = new vuerouter({routes})

to your actual error. yes you imported login in your routes.js file, but at the error shows you, it isn't defined in app.js. you need to import things in every file you want to use it in.


Related Query

More Query from same tag