VueRouter 没有按预期加载组件

Question

除了路由器没有加载组件外，我的应用程序似乎加载没有错误：

// 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 前端 JS 设置

看起来路由器加载正常但无法识别组件：

// 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>

Answer 1

vue 路由器将您定义的组件挂载在 <router-view> tag/component 中的路由中。您很可能希望在 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.

VueRouter 没有按预期加载组件

VueRouter does not load components as expected

laravel

vue.js

vue-router