Vue2 / vue-router / Laravel - 路由器視圖未顯示 Vue 組件

Question

我遇到了一個問題，我的 Vue 組件沒有通過路由器視圖顯示，控制台中沒有 Vue 警告或錯誤。

這是 git： https://github.com/woottonn/fullstack

這是我的代碼：

Welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Full Stack Blog</title>
    </head>
    <body class="antialiased">
        <div id="app">
            <mainapp></mainapp>
        </div>
    <script src="{{mix('/js/app.js')}}"></script>
    </body>
</html>

應用程序.js

require('./bootstrap');
import Vue from 'vue'
import router from './router'

Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
    el: '#app',
    router
});

路由器.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import myFirstVuePage from './components/pages/myFirstVuePage'

const routes = [
    {
        path: '/my-new-vue-route',
        component: myFirstVuePage
    }
];

export default new Router({
    mode: 'history',
    routes
})

主應用程序.vue

<template>
    <div>
        <h1>VUE Componenty</h1>
        <router-view></router-view>
    </div>
</template>

myFirstVuePage.vue

<template>
    <div>
        <h1>This is my first page...</h1>
    </div>
</template>

我在這里遺漏了明顯的東西嗎？

--- 編輯：直接轉到 URL (/my-new-vue-route) 會引發錯誤，所以這也不起作用。 ---

Answer 1

在routes/web.php中，添加：

Route::get('/{vue_capture?}', function () {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

這有助於 Laravel 捕獲 Vue 生成的 URL，並且是設置歷史模式時的路由解決方案，正如您所看到的那樣。

export default new Router({
    mode: 'history',
    routes
})

Vue2 / vue-router / Laravel - 路由器視圖未顯示 Vue 組件

問題描述

1 個解決方案

解決方案1
0 2021-11-19 12:43:10

Vue2 / vue-router / Laravel - 路由器視圖未顯示 Vue 組件

問題描述

1 個解決方案

解決方案1 0 2021-11-19 12:43:10

解決方案1
0 2021-11-19 12:43:10