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

Posted 2023-02-22

【中文标题】某些路由是不是可以使用 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