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

Posted 2023-03-14

【中文标题】Vue-router 不在页面上显示组件

【英文标题】：Vue-router does not show component on page

【发布时间】：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>

【参考方案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,
            
        
    ]
)