vue 应用程序中的路由器视图和组件（laravel）答案

【问题标题】：router-view and component in vue app (laravel)vue 应用程序中的路由器视图和组件（laravel）
【发布时间】：2018-12-12 18:19:22
【问题描述】：

我正在尝试在我的 Laravel 刀片文件中添加路由器视图和组件。 router-view 完美运行，它根据页面 URL 更改组件。但是我想在我的router-view 上方添加一个<nav></nav> 组件，以便我可以加载每个页面的导航。

我的问题是，有什么问题？它不起作用，目前<router-view> 加载了正确的组件，但是<nav> 没有加载任何内容。

App.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import {routes} from './routes';
import Nav from './components/Nav.vue';
import store from './store.js';
import axios from 'axios';

Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(Vuetify);

Vue.config.productionTip = false;

const router = new VueRouter({
    routes,
});

const app = new Vue({
    el: '#app',
    store,
    router,
    components: {
        Nav
    }
});

Master.blade.php：

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="_token" content="{!! csrf_token() !!}"/>

        <title>Laravel</title>

        <link href="{{ asset('css/app.css') }}" rel="stylesheet"/>

    </head>
    <body>

    <div id="app">
        <nav></nav>

        <router-view></router-view>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>

    </body>
</html>

Nav.vue：

<template>
    <div>
        <p>hey</p>
    </div>
</template>

<script>
    export default {
        name: "nav"
    }
</script>

<style scoped>

</style>

【问题讨论】：

那么您的实际问题是什么？
@Joe 我的问题是，怎么了？它不起作用，目前<router-view> 加载了正确的组件，但是<nav> 没有加载任何内容。

标签： laravel laravel-5 vue.js vuejs2 vue-component

【解决方案1】：

只需为组件使用不同的名称，而不是 nav，因为它是有效的 HTML 保留标记。

【讨论】：

太好了，非常感谢。我现在觉得有点傻。
没什么好担心的，它一直在发生！