這是我爲我的模塊代碼將被吞掉laravel仙丹Vue公司的路由器和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>

我真的因爲當我編譯它我收到一個錯誤，路由器鏈接沒有註冊，但當我把我的腳本標籤上部

應用程序未找到

我該如何讓這件事情起作用？

來源

2016-11-15 Ralph Christian D Eclipse

IIUC：在服務器端呈現html，並向其中注入腳本，腳本包含編譯後的vue組件，並將其掛載到dom中的節點上。這意味着，包含router-link的php文件只能通過php解析器傳遞，他們不知道router-link是什麼。只有前端編譯器知道如何處理router-link，所以你需要將它放在你的vue組件的模板中（以使它通過了解它的前端編譯器）。另外，當你登入#app時，它內的內容將被vue覆蓋，所以請避免將有用的東西放進去，而是重新組織你的html或將它們放到你的vue組件中。

來源

2016-11-17 09:22:04

Vue公司的路由器和laravel SPA

應用程序未找到

回答

相關問題