Laravel Vue.js - 包含 vue-router 的最简单方法？
Posted
技术标签:
【中文标题】Laravel Vue.js - 包含 vue-router 的最简单方法？【英文标题】：Laravel Vue.js - easiest way to include vue-router? 【发布时间】：2017-12-28 10:20:16 【问题描述】：在 bootstrap.js 中，我有这个：
window.Vue = require('vue');
window.events = new Vue();
现在我也想使用 vue-router 来访问 this.$route。最简单的方法是什么？我尝试遵循官方文档，但它与 laravel 自带的有很大不同：
const app = new Vue(
router
).$mount('#app')
谢谢！
【问题讨论】：
【参考方案1】：在 app.js 中
import VueRouter from 'vue-router';
window.Vue = require('vue');
window.Vue.use(VueRouter);
import router from './config/routes';
const app = new Vue(
el: '#app',
router,
);
您可以将路由定义的代码提取到 ./config/routes.js 中，请参见下面的示例：
import VueRouter from 'vue-router';
const routes = [
path: '/', redirect: '/app/articles',
...
];
const router = new VueRouter(routes);
export default router;
【讨论】：
【参考方案2】：首先安装vue-router。
然后在resources/assets/js中新建一个文件router.js，并将这段代码放入其中。
import Router from 'vue-router'
Vue.use(Router)
/*
Make sure your pages components are inside `resources/assets/js/pages` folder
*/
const Home = require('./pages/Home.vue')
const Hello = require('./pages/Hello.vue')
const NotFound = require('./pages/NotFound.vue')
let router = new Router(
mode: 'history',
routes: [
path: '/',
name: 'home',
component: Home
,
path: '/hello',
name: 'hello',
component: Hello
,
path: '*',
component: NotFound
, ]
)
export default router
现在转到app.js 文件并插入此代码：
import Vue from 'vue'
import router from './router.js'
const app = new Vue(
el: '#app',
router, // Add this to your Vue instance
//...
)
然后创建您的页面（在本例中为Home.vue、Hello.vue 和NotFound.vue）。
【讨论】：
但是我仍然希望我的路由由 laravel 管理，我只想使用 vue-router 来获取 url 参数。这是矫枉过正吗？我应该改用 jquery 吗？ 我认为是。因为此设置适用于单页应用程序。 是的，我刚刚意识到这一点。谢谢！【参考方案3】：以下是让 laravel 路由和 vue 路由协同工作的步骤：
1。定义你的 Vue 布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
2。定义您的 laravel 路由以使 vue-router 处理 url
Route::any('all', function()
// welcome view should extend layout defined in step #1
return view('welcome');
)->where('all', '.*');
3。使用 vue-router 设置 vue
routes.js
import DashboardPage from './components/dashboard/dashboard.vue'
import SignupPage from './components/auth/signup.vue'
import SigninPage from './components/auth/signin.vue'
export const routes = [
path: '/signup', component: SignupPage ,
path: '/signin', component: SigninPage ,
path: '/dashboard', component: DashboardPage ,
path: '*', redirec: '/'
];
router.js
import VueRouter from 'vue-router';
import routes from './routes';
export const router = new VueRouter(
routes,
mode: 'history'
);
export default router
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from './router'
Vue.use(VueRouter);
new Vue(
router: router,
render: h => h(App)
).$mount('#app')
【讨论】：
以上是关于Laravel Vue.js - 包含 vue-router 的最简单方法？的主要内容，如果未能解决你的问题，请参考以下文章
无法在 Laravel/Vue.Js 中执行 Ajax 请求
是否可以将 Vue Admin (Bulma) 包含到 Laravel 中？
Laravel + Vue.js (axios) - CSRF 令牌不匹配