laravel+vue+vue-router无法显示页面

laravel路由:

Route::get('/', function () {
    return view('welcome');
});

asset目录结构:
image.png

app.js文件代码:


require('./bootstrap');

window.Vue = require('vue');

import router from './router';

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

router/index.js文件代码:

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes
});

router.beforeEach((to, from, next) => {

});

router.afterEach(() => {
  
});

export default router;

router/router.js文件代码:

import index from '../page/index';
import user from '../page/user';


const visitor = [
    {
        name: 'index',
        path: '/',
        component: index
    }
];

const member = [
    {
        path: '/user',
        component: user
    }
];

export default [
    ...visitor,
    ...member
];

welcome.blade.php文件代码:

<!doctype html>
<html>
    <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="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
        <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
    </body>
    <script src="{{ mix('/js/app.js') }}"></script>
</html>

page/index.vue文件代码:

<template>
    <div>这是首页{{name}}</div>
</template>

<script>
    export default {
        data: function(){
            return {
                name: 'wwww',
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

现在问题是访问首页运行不报错,但是页面是空白的

阅读 2k
1 个回答

原因找到了,已经搞定了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题