Machen Sie ein SPA mit vue, aber einige Probleme

Ich benutze Larvel (neueste Version) und ich versuche, ein SPA mit vuejs zu machen. Ich folgte einem SPA-Tutorial in den Laracast-Episoden über Vue Js. Allerdings habe ich ein bisschen Ärger. Ich denke, ich mache etwas falsch in der routes.js-Datei, weil im Tutorial sagt es, um die Komponente erforderlich (./ views/home) zu machen, aber die require-Funktion ist nicht gelöst.Machen Sie ein SPA mit vue, aber einige Probleme

Das Problem ist, dass auf der Seite der Router-Link-Tag ist nicht

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 zu einem Anker-Tag zusammengestellt werden. 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

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

Quelle

2017-12-25 ThatPurpleGuy

Bitte posten Sie Ihr #nav Element ... Ich vermisse dieses bisschen. –

@DavidHeremans Ich habe die App Layout hinzugefügt, die die "nav" Elemente enthält – ThatPurpleGuy

Ihre bootstrap.js sagt Vue.use ('VueRouter'); Ich glaube, dass Sie die importierte Variable und kein Zeichenkettenliteral verwenden müssen. –

Wenn bei Ihrer bootstrap.js suchen, es scheint, dass Sie Vue.use(‘VueRouter’) tun. Wenn Sie die Methode use aufrufen, müssen Sie ihr das importierte VueRouter-Objekt und kein Zeichenfolgenliteral übergeben.

Quelle

2017-12-25 08:57:49

Machen Sie ein SPA mit vue, aber einige Probleme

Antwort

Verwandte Themen