Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
834 views
in Technique[技术] by (71.8m points)

javascript - routes content does not show in Vue-router and Laravel

Im following this YT tutorial, I followed the steps but it seems that the ExampleComponent does not show. The App.vue shows but not the route.

Here are my code:

app.js

import Vue from 'vue';
import router from './router';
import App from './components/App';

require('./bootstrap');

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

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import ExampleComponent from './components/ExampleComponent';

Vue.use(VueRouter);


export default new VueRouter({
    routes : [
        { path : '/', component : ExampleComponent }
    ],
    mode: 'history'
});

App.vue

<template>
    <div>
        <h1> Hello!</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : "App"
    }
</script>

<style scoped>
    
</style>

app.blade.php

<body>
    <div id="app">
        <App></App>
    </div>
</body>

web.php

Auth::routes();

Route::get('/{any}', 'HomeController@index')->where('any', '.*');

Thanks in advance.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Change the mode from history to hash because the history mode in this case is reserved to Laravel routing system :

export default new VueRouter({
routes : [
    { path : '/', component : ExampleComponent }
],
mode: 'hash'
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...