Question

我是Laravel＆amp;的新手。 VueJs。

我目前的问题是这三件事：

[Vue警告]：找不到元素：#navigation
[Vue警告]：找不到模板元素或为空：#navigation
vue.js：437 [Vue警告]：无法安装组件：未定义模板或渲染功能。

这是我的navigation.vue文件

<template id="navigation">
  <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">
    <div class="u-tab-menu">
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/home">home</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/about">about</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/products">products</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/services">services</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/contact">contact</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/qa">qa</router-link>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
  export default {}
</script>

这是我的routes.js文件

// import components into routes.js here
import home from './components/home.vue'
import about from './components/about.vue'
import products from './components/products.vue'
import services from './components/services.vue'
import contact from './components/contact.vue'
import qa from './components/qa.vue'

var router = new VueRouter();

router.map({
  path: "/home",
  component: "home"
}, {
  path: "/about",
  component: "about"
}, {
  path: "/products",
  component: "products"
}, {
  path: "/services",
  component: "services"
}, {
  path: "/contact",
  component: "contact"
}, {
  path: "/qa",
  component: "qa"
});

export default router

这是我的main.js文件

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

import {
  routes
} from './routes.js'
import navigation from './components/navigation.vue'

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

Vue.use(vueRouter);
router.start(navigation, '#app');

require('./bootstrap');

window.Vue = require('vue');

这是我的.blade.php文件

<!doctype html>
<html lang="{{ config('app.locale') }}">

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

  <title>Laravel Test Application</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>
  <!--<script type="text/javascript" src="resources/assets/js/main.js"></script>-->
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
  <!-- Styles -->
  <link href="{{ elixir('css/app.css') }}" rel="stylesheet" type="text/css">
  <link href="{{ elixir('css/main_style.css') }}" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="app">
        <!-- Root Vue Instance -->

        <navigation></navigation>
        @{{ testData }}
      </div>
    </div>

    <router-view></router-view>

  </div>

  <script type="text/javascript">

    Vue.component('navigation', {
      template: '#navigation'
    });

    const app = new Vue({

      el: '#app',
      data: {
        testData: "Some text here"
      },
      methods: {

      },
      router: this.router
    }).$mount('#app')

  </script>

</body>

</html>

我不知道从哪里开始弄清楚这一点以及为什么这样做。我基本上把所有部分放在一起使它工作，但我没有看到错误在哪里。请帮忙。提前致谢。

Answer 1

我有同样的错误。我通过用

包围Vue声明来解决此问题

$(document).ready(function() { .... };

Laravel VueJS - 找不到元素：#navigation

1 个答案: