app

Question

这是我的模块代码，将由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>

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

找不到

app

我怎样才能使这件事有效？

Answer 1

IIUC：在服务器端呈现html，并向其注入脚本，该脚本包含已编译的vue组件，并将其挂载到dom中的节点。这意味着，包含router-link的php文件只会通过php解析器传递，而php解析器不知道router-link是什么。只有前端编译器知道如何处理router-link，因此您需要将其放入vue组件的模板中（以使其通过了解它的前端编译器）。此外，当您安装到#app时，其中的内容将被vue覆盖，因此请避免将有用的内容放入其中，而是重新组织您的html或将其放入您的vue组件中。

Vue路由器和laravel SPA

app

1 个答案: