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

发布于 2022-09-11 23:57:52 字数 2253 浏览 23 评论 0

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>

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

北凤男飞 2022-09-18 23:57:52

原因找到了,已经搞定了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文