Laravel Vue.js - 包含 vue-router 的最简单方法？答案

【问题标题】：Laravel Vue.js - easiest way to include vue-router?Laravel Vue.js - 包含 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')

谢谢！

【问题讨论】：

标签： javascript php laravel vue.js vue-router

【解决方案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')

【讨论】：