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

Question

在 bootstrap.js 中，我有这个:

window.Vue = require('vue');
window.events = new Vue();

现在我也想使用 vue-router 来访问 this.$route。最简单的方法是什么？我试图遵循官方文档，但它与 laravel 附带的文档有很大不同:

const app = new Vue({
router
}).$mount('#app')

谢谢!

Answer 1

首先安装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)。