如何结合 laravel 和 vue 路由
Posted
技术标签:
【中文标题】如何结合 laravel 和 vue 路由【英文标题】：How to combine laravel and vue routes 【发布时间】：2019-06-23 09:02:11 【问题描述】：我正在创建一个简单的 laravel 和 vuejs CRUD 应用程序。 Vue Routes 不起作用，我对 vuejs 很陌生；请看代码 下面是 web.php 的代码
Route::get('/', function ()
return view('welcome');
);
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
Route::get('/vue','Api\PostController@home');
Route::resource('/api','Api\PostController');
以下是 app.js 的代码
require('./bootstrap');
window.Vue = require('vue');
window.VueRouter=require('vue-router').default;
window.VueAxios=require('vue-axios').default;
window.Axios=require('axios').default;
let AppLayout = require('./components/App.vue');
const Posts = Vue.component('Posts',require('./components/Posts.vue'));
const EditPost =
Vue.component('EditPost',require('./components/EditPost.vue'));
const AddPost =
Vue.component('AddPost',require('./components/AddPost.vue'));
const DeletePost =
Vue.component('DeletePost',require('./components/AddPost.vue'));
const ViewPosts =
Vue.component('ViewPosts',require('./components/ViewPosts.vue'));
const ExampleComponent =
Vue.component('ViewPosts',require('./components/ExampleComponent.vue'));
// Registering routes
Vue.use(VueRouter,VueAxios,axios);
const routes = [
name: 'Posts',
path: '/posts',
component: Posts
,
name: 'AddPost',
path: '/add-posts',
component: AddPost
,
name: 'EditPost',
path: '/edit-post/:id',
component: EditPost
,
name: 'DeletePost',
path: '/delete-post',
component: DeletePost
,
name: 'ViewPosts',
path: '/view-post',
component: ViewPosts
,
name: 'ExampleComponent',
path: '/example-component',
component: ExampleComponent
,
];
const router = new VueRouter(mode: 'history', routes: routes);
new Vue(
Vue.util.extend(
router ,
AppLayout
)).$mount('#app');
这是我的刀片模板的代码，当我浏览 http://localhost:8000/vue 时，正在呈现此视图。正如您在上面的 web.php 代码中看到的那样。 我还可以在控制台中看到通知 您正在开发模式下运行 Vue。确保在部署生产时打开生产模式。
<!DOCTYPE html>
<html lang=" app()->getLocale() ">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<title> config('app.name', 'Laravel') </title>
<!-- Styles -->
<link href=" asset('css/app.css') " rel="stylesheet">
</head>
<body>
<div class="container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" title="Home page" class="logo"/>
<h1>Vue.js CRUD With Laravel 5 application</h1>
</div>
</header>
</div>
<section id="app">
</section>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
<script src=" asset('js/app.js') "></script>
</body>
</html>
但是当我使用
运行我的应用程序时 php artisan serve
并浏览到
http://localhost:8000/posts
应用程序显示 404 错误。请帮我解决这个问题。
【问题讨论】：
你在哪个blade文件中使用了app.js for vuejs？ 我在 vue_app.blade.php 中使用它 我已经为你解答了一个解决方案。请让我知道它是否对您有用。 【参考方案1】：您需要在 routes/web.php 文件中为使用 app.js (vuejs) 的视图添加 laravel 路由。
Route::get('/route-name/?name', function()
return redirect('vue_app');
)->where('name', '[A-Za-z]+');
然后你必须使用 laravel 路由作为 vuejs 路由的父路由，并使用如下所示的 url，
http://localhost:8000/laravel-route/view-route
在你的情况下，
http://localhost:8000/route-name/posts
或者你也可以使用，
Route::get('any', function ()
return view('vue_app');
)->where('any', '.*');
而不是以前使用localhost:8000/posts
【讨论】：
亲爱的，我遇到了同样的错误，localhost:8000/route-name/posts 我需要更改 app.js 吗？让我编辑问题以包含 vue_app.blade.php 你能试试吗，Route::get('any', function () return view(''vue_app'); )->where('any', '.*' );而不是以前的路线并直接使用localhost:8000/posts url？你能显示你的 routes.php 和错误页面吗？ 它正在工作并重定向到所需的刀片；没有错误，但是我很困惑，正如您在我写的 app.js 中看到的那样，如果请求是针对 /post 的，它必须呈现 Posts 组件，即 Posts.vue，它没有被呈现。你能找出问题所在吗？ 兄弟，我在下面的另一个答案中给出了您第二个问题的解决方案。请检查一下。如果您在单独的帖子中问两个问题会更好，并且如果它适用于您的初始问题，也应该接受这个答案。那么这将有利于其他可能面临类似情况的人。谢谢你【参考方案2】：试试这个到你的 web.php 路由
Route::get('/', function ()
return view('index');
);
Route::get('/catchall?', function ()
return response()->view('index');
)->where('catchall', '(.*)');
【讨论】：
【参考方案3】：对于您的问题的第二部分，
您应该使用<div> 而不是<section>，并且您必须将主/注册组件带入刀片文件中id="app" 选择的html 元素中。在你的情况下，
<div id="app">
<app-layout></app-layout>
</div>
希望这对您有所帮助。你可以检查这个basic vuejs with laravel
PS：你应该在两个单独的帖子中问两个不同的问题。
【讨论】：
【参考方案4】：如果使用 any 不起作用，您也可以尝试添加 ?
Route::get('/any-your-route/any?', function()
return view('your-view');
)->where('any', '.*');
希望这对您有所帮助。我只是尝试这段代码并使用 vue 路由器处理 laravel 刀片模板。 在 Laravel 8
上测试【讨论】：
【参考方案5】：你可以这样做。
Route::get('/vue_capture?', function()
return view('welcome');
)->where('vue_capture', '[\/\w\.-]*');
【讨论】：
以上是关于如何结合 laravel 和 vue 路由的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 表单使用 Ajax 和 Laravel 路由提交到数据库