Vue2 / vue-router / Laravel - 路由器视图未显示 Vue 组件

Question

I'm running into a problem where my Vue component isn't showing via router-view, there are no Vue warnings or errors in the console.我遇到了一个问题，我的 Vue 组件没有通过路由器视图显示，控制台中没有 Vue 警告或错误。

Here's the git: https://github.com/woottonn/fullstack这是 git： https://github.com/woottonn/fullstack

Here's my code:这是我的代码：

welcome.blade.php 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>

app.js应用程序.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
});

router.js路由器.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
})

mainapp.vue主应用程序.vue

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

myFirstVuePage.vue myFirstVuePage.vue

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

Am I missing obvious something here?我在这里遗漏了明显的东西吗？

--- EDIT: Going directly to the URL (/my-new-vue-route) throws an error, so that's not working either. --- 编辑：直接转到 URL (/my-new-vue-route) 会引发错误，所以这也不起作用。 --- ---

Answer 1

In routes/web.php , add this:在routes/web.php中，添加：

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

This helps the Laravel to capture URLs generated by Vue and is a solution for routing when history mode is set, as you seem to have.这有助于 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