【问题标题】：Vue router and laravel SPAVue 路由器和 laravel SPA
【发布时间】：2017-03-28 20:32:34
【问题描述】：

这是我的模块代码，将由 gulp laravel elixir 编译

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>

我真的很难过，因为当我编译它时，我收到一个错误，路由器链接没有注册，但是当我把我的脚本标签放在上面时

找不到应用

我怎样才能让这个东西工作？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

IIUC：在服务器端渲染一个 html，并注入一个脚本，该脚本包含您编译的 vue 组件，并将其挂载到 dom 中的节点。这意味着，包含router-link 的php 文件只会通过php 解析器，谁不知道router-link 是什么。只有前端编译器知道如何处理router-link，所以你需要把它放在你的vue组件的模板中（让它通过理解它的前端编译器）。另外，当你挂载到#app时，里面的内容会被vue覆盖，所以不要把有用的东西放在里面，而是重新组织你的html或者把它们放在你的vue组件中。

【讨论】：