Laravel VueJs：`router-view` 不渲染组件

Posted 2023-02-16

【中文标题】Laravel VueJs：`router-view` 不渲染组件

【英文标题】：Laravel VueJs : `router-view` does not render the component

【发布时间】：2020-04-02 08:40:51

【问题描述】：

我知道这个网站上有这样的问题，但它们并不能解决我的问题。因此，这个问题在这里弹出：

在我的 Laravel 5.3 和 VueJs 应用程序中，app.js 文件中的 Vue 根实例指向 App.vue 和 App.vue 我有 router-view 占位符。所以我希望页面组件在占位符内呈现，但这不会发生。

让我显示不同文件中的内容：

在web.php 我有：

Route::get('/listing/listing', function(Listing $listing)

    $model = $listing->toArray();

    return view('app',['model' => $model]);


); 

在router.js，我有：

import Vue from 'vue';
import VueRouter from 'vue-router';
import ListingPage from '../components/ListingPage';

Vue.use(VueRouter);


    export default new VueRouter(
        mode:'history',
        routes:[

             path: '/listing/:listing', component: ListingPage, name: 'listing' 
        ]

    );

在app.js 我有：

import ListingPage from '../components/ListingPage.vue';
import  router  from './router';
import App from '../components/App.vue';

var app = new Vue(

    el: '#app',
    render: h => h(App),
    router

);

所以当我点击 url /listing/5 时，应用程序会转到 App.vue 并且应该在 router-view 占位符内呈现 ListingPage 组件。

在App.vue，我有：

<template>
    <div>

        <div id="toolbar">
            <router-link :to=" name: 'home' ">
                <img class="icon" src="/images/logo.png">
                <h1>vuebnb</h1>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

在ListingPage.vue，我有：

  <template>
        <div>

            <div class="container">
                <div class="heading">
                    Heading from listing page 
                </div>
                <hr>
                <div class="about">
                    <h3>About this listing page</h3>

                </div>
            </div>
    </template>

<script>

export default 

           data() 
               return 
                   index: 1
                     
                  
          
</script>

但最后我只获得了App.vue 中的内容，而没有在占位符内呈现ListingPage 组件。

我怎样才能在那里获得正确的渲染？

编辑：

实际上，这个问题出自 Anthony Gore 所著《Full-Stack Vue.js 2 and Laravel 5》一书的源代码。源代码可在 github here 获得。我尝试在 Chapter07 运行代码库。当然，我使用 Laravel 5.5.6 版本 在 localhost 中运行了必要的命令，例如 composer install, npm install, npm run dev，但最后当我点击像 /listing/5 这样的任何 URL 时，我看不到从 @ 呈现的任何内容987654348@ 组件。

您可以从 github 获取代码，也可以从 here 下载代码以在您的 localhost 中运行。

它不起作用的可能原因以及潜在的解决方案是什么？

【问题讨论】：

我认为您在开发模式下使用 vuejs 并且浏览器控制台中没有显示错误？

@JaromandaX，没有发现错误。

@JaromandaX，你能看看我在 OP 中添加的“编辑”部分吗？您可以从我在您的localhost 中提供的链接运行代码以指出问题。

You can run the code from the link I provided in your localhost - 我的本地主机没有 http 服务器 .... 你的呢？

@JaromandaX，我从这里运行 XAMPP：apachefriends.org/download.html 在我的 PC 中创建 http 服务器。我的 PHP 版本是 7.1.26，Laravel 版本是 5.5.26

【参考方案1】：

您需要像这样在 touter 配置中声明您的基本路径：

export default new VueRouter(
  mode:'history',
  routes:[

     path: '/:listing', component: ListingPage, name: 'listing' 
  ],
  base:'/listing',
  root:'/',

);

【讨论】：

为什么要声明base和root？

因为您需要声明路由器应该使用的 url 是什么

你试过了吗？

看看我在 OP 中添加的“编辑：”部分。你能从我提供的链接中运行代码来指出问题吗？

【参考方案2】：

我认为里面 "render: h => h(App)"你可以用

components: App,
template: '<App></App>'

那么 app.js 代码会是这样的：

import  router  from './router';
import App from '../components/App.vue';

var app = new Vue(
    el: '#app',
    components: App,
    template: '<App></App>',
    router
);

我希望这有效。

最好的问候！