Vue-Router 仅显示使用 Laravel Blade 的基本路由?

Posted

技术标签:

【中文标题】Vue-Router 仅显示使用 Laravel Blade 的基本路由?【英文标题】:Vue-Router only showing base route using Laravel Blade? 【发布时间】:2021-05-21 16:45:05 【问题描述】:

我正在从使用 Laravel 路由切换到在我的应用程序上使用 Vue-Router,我只能使用 Vue-Router 获取要加载的基本路由。我使用本文中的示例将路由分成两个文件,公共文件和私有文件:https://itnext.io/vue-router-99e334094362。我是 Vue-Router 的新手,我做错了什么?

这是我的代码:

main.blade.php

<div id="app">
        <section>
            <!-- header menu -->
            <am-app-nav></am-app-nav>
        </section>
        <section>
            <router-view></router-view>
        </section>
        <section>
            <!-- Footer -->
            <am-footer></am-footer>
        </section>
    </div>

app.js:

window.Vue = require('vue')

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router/index.js'

Vue.use(VueRouter)

const app = new Vue(
  el: '#app',
  router,
)

router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes/index.js'
Vue.use(Router)

const router = new Router(
  mode: 'history',
  routes: [
    
      path: '/',
      redirect: '/welcome',
    ,
  ].concat(routes),
)

export default router

router/routes/index/js

import publicRoutes from './public.js'
import privateRoutes from './private.js'

export default publicRoutes.concat(privateRoutes)

router/routes/private.js:

const routes = [
  
    path: '/dashboard',
    component: require('../../views/admin/Dashboard').default,
  ,
  
    path: '/client-details',
    component: require('../../views/admin/ClientDetails').default,
  ,
   
    path: '*', component: require('../../views/public/NotFound').default 
  ,
]

export default routes.map((route) => 
  return  ...route, meta:  public: false  
)

【问题讨论】:

【参考方案1】:

我需要将此添加到web.php

// SPA Route
Route::get('any', function () 
    return view('_layouts.main');
)->where('any', '.*');

【讨论】:

以上是关于Vue-Router 仅显示使用 Laravel Blade 的基本路由?的主要内容,如果未能解决你的问题,请参考以下文章

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

Vue-Router 仅适用于某些路由

Vue-router 不在页面上显示组件

如何同时使用 Laravel 认证和 vue-router

VueJS 2 vue-router 2 (laravel 5.3)

Vue 2 Laravel 5.3 Vue-router 2 设置 Vue-router 的正确方法