Laravel Vuejs Ошибка: Uncaught ReferenceError: Логин не определен

Question

Я пытаюсь использовать vue-router в приложении CRUD, которому я следовал в руководстве. Ссылки отображаются, но я получаю эту ошибку: Uncaught ReferenceError: Логин не определен

Я уже импортировал vue-router в мой app.js и выложил маршруты в моем файле rout.js. Тем не менее ошибка все еще выскакивает. Я уже давно искал эту ошибку и, похоже, не могу выяснить, что ее вызвало.

app.js:

require('./bootstrap');

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);


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



const app = new Vue({
    el: '#app',

    router: router
})

routes.js:

import App from './App'
import Login from './components/auth/Login'
import Logout from './components/auth/Logout'
import Register from './components/auth/Register'

export const 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
  }
]

export default routes

Спасибо!

Answer 1

Как и во всех других ответах, в этом коде так много неправильного.

Во-первых, есть файл rout.js, но он не используется.

Я имеюсоздал версию вашего кода в песочнице https://codesandbox.io/s/z22rx97z24, чтобы показать вам рабочую версию маршрутизатора / приложения.

Что изменилось?

Во-первых, вы должны экспортировать экземпляр vueМаршрутизатор в router.js не просто определяет const.Это рекомендуемый способ маршрутизации в 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
    }
  ]
});

Во-вторых, вы импортируете этот экземпляр в app.js и присваиваете свойству router свойства экземпляра Vue.

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храните компоненты вне вашего app.js, где это возможно.Это позволяет вам выполнять такие вещи, как загрузка ресурсов по требованию в вашем router.js и т. Д.

Answer 2

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

к вашей фактической ошибке.Да, вы импортировали Login в свой файл rout.js, но, как показывает ошибка, он не определен в app.js.Вам нужно импортировать вещи в каждый файл, в котором вы хотите их использовать.

Answer 3

Вы, кажется, перепутали некоторый код в вашем app.js файле.

В частности, ваша проблема здесь ...

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

У вас нигде не определен символ Login. Вы также определяете некоторые глобальные компоненты, которые я не уверен, что вы хотите сделать.

Я думаю, вы хотите удалить все это ...

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

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

и замените его на

import { routes } from './routes'

const router = new VueRouter({ routes })

---

Я тоже немного подозрительно отношусь к

require('./bootstrap');

но вы еще не сказали, что такое bootstrap, поэтому я оставлю это с вами, чтобы выяснить.