我所拥有的是一个现有的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 不起作用
谢谢。
是的,我认为这应该是可能的。
您需要添加一个Laravel路线,该路线可以捕获所有vue路线,并显示包含vue路线的视图。
Route::get('/vue/{vue_capture?}', function () {
return view('vue.index');
})->where('vue_capture', '[/w.-]*');
你应该能够包括这条路线和最初的拉拉威尔路线。一种选择是用/vue
作为如上所示的视图路线的前缀,或者,如果您按照正确的顺序放置路线,如果您愿意,您应该能够避免使用前缀。
php artisan route:list
命令将帮助您查看当前路由。
是的,你可以而且简单。
你所需要的只是将现有的路由放在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路由器vue路由器