Vue-router 不在页面上显示组件答案

【问题标题】：Vue-router does not show component on pageVue-router 不在页面上显示组件
【发布时间】：2021-05-07 17:20:24
【问题描述】：

我的路由器有问题。我想在我的索引页面上显示 bodyComponent，但什么也没发生。我使用 laravel+vue。我在哪里可以犯错？我没有错
我的路由器：

import Vue from 'vue'
import VueRouter from 'vue-router'
import bodyComponent from '../views/bodyComponent'

Vue.use(VueRouter)

const router= new VueRouter({
    mode: "history",
    routes:[
        {
            path:"/",
            components: {
                default: bodyComponent,
            }
        }
    ]
})
export default router;

app.js

import router from "./router"
const app = new Vue({
    el: '#app',
    router
});

我的 index.blade.php

<div id="app">
        <header-component></header-component> 
        <!--<body-component></body-component>-->
        <router-view></router-view>
        <footer-component></footer-component>
</div>

【问题讨论】：

尝试为您的router-view 定义一个名称。 <router-view name="default"></router-view>

标签： javascript laravel vue.js routes vue-router

【解决方案1】：

我更改了我的 vue 路由中的路径，并且组件显示在索引页面上。在应用程序索引页面上，我来自 laravel 路由器。所以我将路径更改为在 laravel 路由中名称相同的 vue 路由器中的索引页面
我的 laravel 路由器

Route::get('/tobyten', function () {
        return view('tobyten.index');
    })->name('tobyten');

我的 vue 路由器

const router= new VueRouter({
    mode: "history",
    routes:[
        {
            path:"/tobyten",
            components: {
                default: bodyComponent,
            }
        }
    ]
})

【讨论】：