在vue-router历史记录模式下重新加载页面时,哈希显示在url中

时间:2017-10-19 14:16:39

标签: laravel-5 vue.js vue-router

我正在开发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');
},
});

0 个答案:

没有答案