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>标签/组件中。很可能您希望在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无法按预期加载组件

1 个答案: