某些路由是不是可以使用 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 路由器?的主要内容,如果未能解决你的问题,请参考以下文章