Laravel VueRouter未按预期加载组件

我的应用程序似乎正在加载，但路由器没有加载组件：

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

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

// 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');

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

登录
电子邮件地址
密码
{{error}}
登录
将*作为api从“../api”导入
从“../SWALTILS”导入SWALTILS
导出默认值{
数据（）{
返回{
电子邮件：“”，
密码：“”，
错误：“”，
}
},
方法：{
登录（）{
utils.spinner（）；
api.login（this.email，this.password）
.然后（resp=>{
if（响应数据访问令牌）{
localStorage.setItem（'token'，resp.data.access\u token）；
//重定向
}
})
.catch（err=>{console.log（err）；swalUtils.handleError（err）；}）
},
}

vue路由器将您在路由中定义的组件装载到

标记/组件中。您很可能希望在

App.vue

或用作根组件的任何组件中使用此功能。你会得到这样的结果：

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

<script>
export default {
  name: "App"
};
</script>

//App.vue
导出默认值{
名称：“应用程序”
};

//main.js
从“Vue”导入Vue；
从“vue路由器”导入VueRouter
从“/routes”导入路由
从“./App”导入应用程序
Vue.use（VueRouter）
常量路由器=新的VueRouter({
路线，
模式：“历史”
})
const app=新的Vue({
路由器，
组件：{App}，
模板：“”
}).$mount（“#应用程序”）

---

请注意，在这段代码中有两件事发生了变化。首先，我们现在正在我们的主要组件中定义一个

路由器视图

，即

App

。第二个是我们使用这个组件在main.js中挂载它。

vue路由器将您在路由中定义的组件挂载在

标记/组件中。您很可能希望在

App.vue

或用作根组件的任何组件中使用此功能。你会得到这样的结果：

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

<script>
export default {
  name: "App"
};
</script>

//App.vue
导出默认值{
名称：“应用程序”
};

//main.js
从“Vue”导入Vue；
从“vue路由器”导入VueRouter
从“/routes”导入路由
从“./App”导入应用程序
Vue.use（VueRouter）
常量路由器=新的VueRouter({
路线，
模式：“历史”
})
const app=新的Vue({
路由器，
组件：{App}，
模板：“”
}).$mount（“#应用程序”）

---

请注意，在这段代码中有两件事发生了变化。首先，我们现在正在我们的主要组件中定义一个

路由器视图

，即

App

。第二个是我们使用这个组件在main.js中挂载它。

你可能需要在

新VueRouter（{}）

@RuChernChong中设置

基

，这没有帮助，除非我不知道有什么神奇的事情发生，我认为你实际上没有在这里挂载任何组件，因此，没有

路由器视图

可以将组件放入其中。你在屏幕上看到什么了吗？除了

路由器视图

之外，你能在你认为是根组件的组件中放入任何东西，看看它是否得到渲染吗？@Sumurai8是正确的。我也忽略了这一点。那可能是it@Sumurai8谢谢-添加了Login.vue代码，没有我在任何地方使用的

路由器视图

，我假设在routes数组中定义组件就足够了。我应该在哪里添加它？您可能需要在

新VueRouter（{}）

@RuChernChong中设置

基

，这没有帮助，除非有一些我不知道的魔法，我认为您实际上没有在这里安装任何组件，因此没有

路由器视图

。你在屏幕上看到什么了吗？除了

路由器视图

之外，你能在你认为是根组件的组件中放入任何东西，看看它是否得到渲染吗？@Sumurai8是正确的。我也忽略了这一点。那可能是it@Sumurai8谢谢-添加了Login.vue代码，没有我在任何地方使用的

路由器视图

，我假设在routes数组中定义组件就足够了。我应该在哪里添加它？