VueRouter 没有按预期加载组件

Posted 2023-03-14

【中文标题】VueRouter 没有按预期加载组件

【英文标题】：VueRouter does not load components as expected

【发布时间】：2018-12-23 05:29:27

【问题描述】：

除了路由器不加载组件外，我的应用似乎正在加载且没有错误：

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

我正在使用 laravel 前端 JS 设置

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

// 登录.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>

【问题讨论】：

你可能需要在new VueRouter()中设置base

@RuChernChong 没有帮助

除非发生了一些我不知道的魔法，否则我认为您实际上并没有在此处安装任何组件，因此没有router-view 可以将您的组件放入其中。你在屏幕上看到什么了吗？除了router-view 之外，您可以在您认为是根组件的组件中添加任何内容并查看它是否被渲染？

@Sumurai8 是对的。我也忽略了这一点。可能是这样

@Sumurai8 感谢 - 添加了 Login.vue 代码，不，我在任何地方都没有使用 router-view，我假设在 routes 数组中定义组件就足够了。我应该在哪里添加它？

【参考方案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中。