时间戳

首页 > 解决方案 > 某些路由是否可以使用 vue 路由器而其他路由使用 laravel 路由器？

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

问题描述

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

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

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

然后我想使用vue路由器添加一个新路由而不干扰类别路由

例如：

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

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

这可能吗？

更新：这就是我所做的（如果有人能指出我做错了什么，将不胜感激）

1.0 使用 npm 安装 Vue 路由器

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 没用

谢谢你。

标签： phplaravelvue.jsvue-routerlaravel-routing

解决方案

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

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

它应该看起来像这样。

网页.php

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

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

Vue控制器

public function __invoke()
{
   reuturn view('index');
}

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

推荐阅读