Question

Laravel：7.17，Vue：2.5.17。

我制作了简单的侧边栏，并尝试使其工作。

一步路由器（/ admin，/ home，/ ...）工作正常，但是两步路由器（/ admin / blog / category，/ admin / blog / post ...）无效。

这就是我所做的。

-routes / web.php

Route::get('/{any?}', function() {
   return view('app');
})->where('any', '.*');

-resources / views / app.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>Laravel</title>
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
       <div id="app">
           <div class="container mx-auto">
               <main class="d-flex">
                   <aside class="w-25">
                        <section>
                            <ul>
                                <li><router-link to="/admin">Dashboard</router-link></li>
                            </ul>
                        </section>
                       <section>
                           <h6>Blog </h6>
                           <ul class="list-group">
                               <li><router-link to="/admin/blog/category">Category</router-link></li>
                               <li><router-link to="/admin/blog/post">Posts</router-link></li>
                           </ul>
                       </section>
                   </aside>
                   <div class="p-3">

                        <router-view></router-view>
                        
                   </div>
               </main>
           </div>
       </div>

       <script src="/js/app.js"></script>
    </body>
</html>

-resources / js / app.js

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

Vue.use(VueRouter);

const app = new Vue({
    el: '#app',


    router: new VueRouter(routes)
});

-resources / js / routes.js

import Home from './components/Home';
import Admin from './components/admin/Admin';
import Category from './components/admin/blog/Category';
import Post from './components/admin/blog/Post';
import PathThrough from './components/PathThrough';

export default {
    mode:'history',

    routes:[
        {
            path:'/',
            component: Home
        },

        {
            path:'/admin',component: Admin,
            children: [
                {
                    path:'blog', component: PathThrough,
                    children: [
                        { path: 'category', component: Category},
                        { path: 'post', component: Post},
                    ]
                }
            ]
        },


    ]

};

-resources / js / components / PathThrough.vue

<template>
  <router-view></router-view>
</template>
    <script>
    export default {};
</script>

-其他组件

<template>
    <h1>Home Page</h1>
</template>

<script>
    export default {};
</script>

此处，/ admin和/路由正常。但是其他路线无效。谁能帮我？谢谢！

Laravel + Vue Spa两步路由器不起作用

0 个答案: