我正在开发laravel 5.5 + SPA项目。当我重新加载页面时,哈希出现在每条路线中:https://dev.pramsystem.com/#/。我的Web服务器配置符合https://router.vuejs.org/en/essentials/history-mode.html中的建议。我很担心,我无法解决这个问题。我对这个奇怪的“#”没有任何想法。
我的route.js文件:
import VueRouter from 'vue-router';
import Vue from 'vue'
Vue.use(VueRouter);
let routes = [
{
path: '/',
component: require('./views/Home.vue')
},
{
path: '/history',
component: require('./views/History.vue')
},
{
path: '/options',
component: require('./views/Options.vue')
},
{
path: '/manageProduct/:id',
name: 'manageProduct',
component: require('./views/ManageProduct.vue'),
props: true
}
];
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior: function(to, from, savedPosition) {
if (to.hash) {
return {selector: to.hash}
} else {
return { x: 0, y: 0 }
}
},
});
export default router
我的web.php文件:
Route::put('products/productNote/{product}',
'ProductController@updateProductNote');
Route::post('/file', 'ProductController@uploadFile');
Route::get('/days', 'ProductController@getDays');
Route::get('/profit', 'ProductController@getProfit');
Route::get('/export', 'ProductController@export');
Route::get('/products/chart', 'ProductController@chart');
Route::get('/products/{date?}', 'ProductController@index');
Route::get('/products/{product}/edit/{flag?}', 'ProductController@edit');
Route::resource('products', 'ProductController');
Route::resource('goal', 'GoalController');
Route::resource('employee', 'EmployeeController');
Route::resource('vendor', 'VendorController');
Route::patch('/fee/{product}', 'ProductController@feeRecalculate');
Route::any('{all}', function () {
return view('index');
})->where(['all' => '.*']);
app.js :
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
/* Vuex */
import Vuex from 'vuex';
Vue.use(Vuex);
import store from './store';
/* VueRouter */
import router from './routes';
/* VueSweetAlert */
import VueSweetAlert from 'vue-sweetalert'
Vue.use(VueSweetAlert);
window.moment = require('moment');
/* Event Bus */
export const Bus = new Vue();
Vue.component('Goal', require('./components/Goal.vue'));
Vue.component('ProfitDay', require('./components/ProfitDay.vue'));
new Vue({
el: '#app',
router,
store,
created () {
this.$store.dispatch('loadData');
},
});