文章/答案/技术大牛

发布

社区首页 >问答首页 >Laravel VueJS -找不到元素：#导航

问Laravel VueJS -找不到元素：#导航
EN

Stack Overflow用户

提问于 2017-07-04 10:30:50

回答 1查看 557关注 0票数 1

我是拉勒维尔和VueJ的新手。

我目前的问题是以下三件事：

Vue警告:找不到元素：#导航
Vue警告:模板元素未找到或为空：#导航
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>

我不知道从哪里开始搞清楚为什么要这么做。我基本上把所有的零件放在一起使它工作，但我不知道哪里是错误。请帮帮忙。提前谢谢。

javascript

php

laravel-5

vue.js

回答 1

Stack Overflow用户

发布于 2019-09-20 09:10:31

我也犯了同样的错误。通过将Vue声明围绕在

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44903528

复制

相似问题

问Laravel VueJS -找不到元素：#导航
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel VueJS -找不到元素：#导航EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel VueJS -找不到元素：#导航
EN