Question

我正在使用Larvel（最新版本），我正在尝试使用vuejs制作SPA。我在关于vue js的laracast剧集中关注了SPA教程。但是，我有点麻烦。我认为我在routes.js文件中做错了，因为在教程中它说要使组件成为必需（./ views / home）但是require函数不是解决。

问题是页面上的路由器链接标记没有被编译成锚标记

Boostrap.js

import Vue from 'vue';
import axios from 'axios';
import VueRouter from 'vue-router';

window.Vue = Vue;
Vue.use(VueRouter);

window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Router.js

    import VueRouter from 'vue-router';

      let routes = [
      {
          path:'/',
          component: require('./views/home')
      }];

      export default new VueRouter({
         routes
      });

App.js

import './bootstrap';
import router from './routes'

new Vue({
     el: '#app',

    router
});

home.vue

<template>

    <section class="hero is-dark">
      <div class="hero-body">
            <div class="container">
             <h1 class="title">
                 Primary title
              </h1>
              <h2 class="subtitle">
                   Primary subtitle
                 </h2>
          </div>
      </div>
  </section>

</template>


<script>
 export default {
       mounted() {
           console.log('Component mounted.')
       }
  }
</script>

NAV

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>

    @include('partials.head')

<title>My App</title>
</head>
<body class="">
<div class="wrapper">
    <div class="content-wrapper">
        <div id="app">
          <router-link to='/'>Home</router-link>
          <router-link to='/about'>About</router-link>
        </div>
    </div>
</div>
@include('partials.footer')

</body>
</html>

混合

mix.js('resources/assets/js/app.js', 'public/js')

Answer 1

在查看 bootstrap.js 时，您似乎正在Vue.use(‘VueRouter’)。调用use方法时，需要传递导入的VueRouter对象，而不是字符串文字。

使用vue制作SPA但遇到一些麻烦

1 个答案: