لا يقوم VueRouter بتحميل المكونات كما هو متوقع

0

يبدو أن تطبيقي يتم تحميله بدون أخطاء باستثناء أن جهاز التوجيه لا يقوم بتحميل المكونات:

// routes.js
import Login from './components/Login.vue'

const routes = [
  { path: '/', component: Login }
]

export default routes



// vue-config.js
import Vue from 'vue';
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
    routes,
    mode: 'history'
})

const app = new Vue({
    router
}).$mount('#root')

// app.js
require('./vue-config');

أنا أستخدم إعداد Laravels Front JS

يبدو أن جهاز التوجيه يتم تحميله بشكل جيد ولكن لا يتعرف على المكونات:

Imagen 22

// Login.vue

<template>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="panel panel-default">
        <div class="panel-heading">Login</div>
        <div class="panel-body">
          <form class="form-horizontal" @submit.prevent="login">
            <div class="form-group" :class="{ 'has-error': error }">
              <label for="email" class="col-md-4 control-label">E-Mail Address</label>
              <div class="col-md-6">
                <input v-model="email" id="email" type="email" class="form-control" name="email" required autofocus>
              </div>
            </div>
            <div class="form-group" :class="{ 'has-error': error }">
              <label for="password" class="col-md-4 control-label">Password</label>
              <div class="col-md-6">
                <input v-model="password" id="password" type="password" class="form-control" name="password" required>
                <span v-show="error" class="help-block">
                  <strong>{{ error }}</strong>
                </span>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-8 col-md-offset-4">
                <button type="submit" class="btn btn-primary">
                  Login
                </button>
                <a class="btn btn-link" href="#">
                  Forgot Your Password?
                </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import * as api from '../api'
import swalUtils from '../swalUtils'
export default {
  data() {
    return {
      email: '',
      password: '',
      error: '',
    }
  },
  methods: {
    login() {
      utils.spinner();
      api.login(this.email, this.password)
        .then(resp => { 
          if(resp.data.access_token) {
            localStorage.setItem('token', resp.data.access_token);  
            // redirect
          }

        })
        .catch(err => { console.log(err); swalUtils.handleError(err); } );    }
  },
}
</script>

1 إجابة

1
افضل جواب

يقوم جهاز التوجيه vue بتركيب المكونات التي تحددها في مساراتك في <router-view> العلامة / المكون. على الأرجح تريد هذا في الخاص بك App.vue أو أي شيء تستخدمه كمكون الجذر. ستنتهي بشيء مثل هذا:

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router'
import routes from './routes'
import App from './App'

Vue.use(VueRouter)

const router = new VueRouter({
  routes,
  mode: 'history'
})

const app = new Vue({
  router,
  components: { App },
  template: '<App />'
}).$mount('#app')

لاحظ أن شيئين تغيرت في هذا الرمز. الأول هو أننا نحدد الآن router-view في مكوننا الرئيسي ، وهي App . والثاني هو أننا نستخدم هذا المكون لتركيبه في main.js.

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام