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

问题描述 投票:1回答:1

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

问题是在页面上没有将router-link标记编译为锚标记

Bootstrap.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>

<!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')
javascript laravel vue.js single-page-application
1个回答
0
投票

看着你的bootstrap.js,看来你正在做Vue.use(‘VueRouter’)。调用use方法时,需要将它传入您导入的VueRouter对象,而不是字符串文字。

© www.soinside.com 2019 - 2024. All rights reserved.