Laravel Vue.js - 包含vue-router的最簡單方法？

在bootstrap.js，我有這樣的：Laravel Vue.js - 包含vue-router的最簡單方法？

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

現在我想用VUE路由器以及純粹的有機會獲得這個$路線。什麼是最簡單的方法來做到這一點？我試圖遵循官方文檔，但它與laravel有很大不同：

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

謝謝！

來源

2017-07-22 Hillcow

首先安裝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和）。

來源

2017-07-22 10:39:00 Ikbel

但我仍然希望我的路由由laravel管理，我只想使用vue-router來獲取url參數。這是過度殺傷力？我應該使用jQuery來代替嗎？ – Hillcow

我認爲這是。因爲此設置適用於單個頁面應用程序。 – Ikbel

是的，我剛剛意識到這一點。謝謝！ – Hillcow

在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;

來源

2017-07-22 10:32:10 yixiang

Laravel Vue.js - 包含vue-router的最簡單方法？

回答

相關問題