某些路由是不是可以使用 vue 路由器而其他路由使用 laravel 路由器?

Posted

技术标签:

【中文标题】某些路由是不是可以使用 vue 路由器而其他路由使用 laravel 路由器?【英文标题】:Is it possible for certain routes to use vue router while other routes use laravel router?某些路由是否可以使用 vue 路由器而其他路由使用 laravel 路由器? 【发布时间】:2021-02-26 16:52:43 【问题描述】:

我拥有的是一个现有的 laravel 应用程序,其中包含刀片、laravel 路由和一些 vue 组件。所以我不想用 vue 路由器替换现有的路由。我想要的是在不干扰现有 laravel 路线的情况下添加额外路线。

例如,我有一个类别已经在使用以下类别

Route::get('category/index' , 'CategoryController@index')->name('category.index');

那我想用vue router添加一条新路由,不干扰分类路由

举个例子:

import Dashboard from "../views/Dashboard.vue";

const routes = [
  
    path: "/",
    name: "Dashboard",
    component: Dashboard,
    meta: 
      requiresAuth: true
    
  
]

这可能吗?

更新:这就是我所做的(如果有人能指出我做错了什么,将不胜感激)

1.0 使用 npm 安装 Vue Router

2.0 App.js(使用 Vue 路由器)

import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
     path: '/dashboard', component:  require('./components/Dashboard'),
];

const router = new VueRouter(
    routes, // short for `routes: routes` 
    mode: 'history',
);

3.0 Web.php

Route::get('/vue_capture?', function () 
    return view('testing.main');
 )->where('vue_capture', '^(?!storage).*$'); 

4.0 main.blade.php(在测试文件夹中)

@extends('layouts.app')
@section('content')
<div class="container" id="app">
    <router-view></router-view>
</div>
@endsection

5.0 不行

谢谢。

【问题讨论】:

【参考方案1】:

是的,我相信这应该是可能的。

您将需要添加一个 Laravel 路由来捕获所有 vue 路由并显示一个包含 vue 路由的视图。

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

您应该能够同时包含这条路线和原始 Laravel 路线。一种选择是使用/vue 为上面显示的视图路由添加前缀,或者如果您以正确的顺序放置路由,您应该能够避免使用前缀,如果您愿意的话。

php artisan route:list 命令可以帮助您查看当前的路线。

【讨论】:

所以有一个 laravel 视图充当主模板,它是 vue 文件夹中的 index.blade.php。所以在索引中有一个 ? 注意如果你清除路由会报错Unable to prepare route [vue/vue_capture?] for serialization. Uses Closure. @Aslam 是的,这是正确的,你可以使用 Route::view('/vue/vue_capture?', 'vue.index') laravel.com/docs/8.x/routing#view-routes 来避免这个问题 @desh 是的,您将有一个您描述的视图,其中包含router-view 标签【参考方案2】:

是的,你可以而且很简单。

您只需将现有路由放在处理 vue 应用程序的路由的顶部。

它应该看起来像这样。

web.php

// existing route
Route::get('category/index' , 'CategoryController@index')->name('category.index');

// handle vue app
Route::get('path', 'VueController')->where('path', '(.*)');

VueController

public function __invoke()

   reuturn view('index');

对于工作示例,您可以阅读本节以使用 vue-router vue-router

【讨论】:

以上是关于某些路由是不是可以使用 vue 路由器而其他路由使用 laravel 路由器?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vue 3 中使用路由器视图使某些组件“保持活动”?

vue中路由的动态keepAlive

仅在 Laravel 中公开某些身份验证路由

vue-router 中某些路由的单独导航抽屉

Vue Router:使用 props 将组件和路由解耦

从 Vue.js 中的某些路由中排除 Bootstrap 样式