时间戳

首页 > 解决方案 > Vue-router 不在页面上显示组件

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

问题描述

我的路由器有问题。我想在我的索引页面上显示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;


应用程序.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>

标签： javascriptlaravelvue.jsroutesvue-router

解决方案

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

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


我的vue路由器

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

推荐阅读