2016-11-15 3 views
0

это мой код для моего модуля, который будет составлен глоток Laravel эликсирВьет маршрутизатор и Laravel SPA

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

import axios from 'axios'; 

import VueAxios from 'vue-axios'; 


Vue.use(VueAxios,axios,VueRouter); 


axios.defaults.headers.common['X-CSRF-TOKEN'] = Laravel.csrfToken; 

const Foo = { template: '<div>foo</div>' } 
const Bar = { template: '<div>bar</div>' } 

const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

const router = new VueRouter({ 
    routes, 
}); 

const app = new Vue({ 
    router, 
// render: h => h(app) 
}).$mount('#app') 

и это мой app.blade.php основного шаблона

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- CSRF Token --> 
    <meta name="csrf-token" content="{{ csrf_token() }}"> 

    <title>{{ config('app.name', 'Laravel') }}</title> 

    <!-- Styles --> 
    <link href="/css/app.css" rel="stylesheet"> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
    <!-- Scripts --> 
    <script> 
     window.Laravel = <?php echo json_encode([ 
      'csrfToken' => csrf_token(), 
     ]); ?> 
    </script> 

</head> 
<body> 
<div id="app"> 
    <h1>Hello App!</h1> 
    <p> 
    <!-- use router-link component for navigation. --> 
    <!-- specify the link by passing the `to` prop. --> 
    <!-- <router-link> will be rendered as an `<a>` tag by default --> 
    <router-link to="/foo">Go to Foo</router-link> 
    <router-link to="/bar">Go to Bar</router-link> 
    </p> 
    <!-- route outlet --> 
    <!-- component matched by the route will render here --> 
    <router-view></router-view> 
</div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
    <script src="/js/app.js"></script> 


</body> 
</html> 

Im действительно с трудом, потому что, когда я скомпилирую его, я получаю сообщение об ошибке, что router-link не зарегистрирован, но когда я положил свои теги в верхней части

приложение не найдено

Как я могу заставить эту штуку работать?

ответ

0

IIUC: html отображает на стороне сервера, с помощью скрипта, введенного в него, скрипт содержит скомпилированный компонент vue и подключает его к узлу в dom. Это означает, что файл php, содержащий router-link, будет передан только через php-парсер, который понятия не имеет, что такое router-link. Только компиляторы переднего конца знают, как обращаться с router-link, поэтому вам нужно поместить его в свой шаблон компонента vue (чтобы он прошел через компилятор переднего конца, который его понимает). Кроме того, когда вы устанавливаете на #app, содержимое внутри него будет перезаписано vue, поэтому избегайте добавлять полезные вещи внутрь, но реорганизуйте свой html или поместите их в свой компонент vue.