Почему приложение Vue не монтируется при обновлении?
У меня есть приложение Vuejs SPA со следующим кодом:
...
import Rides from './components/rides'
import RideInfo from './components/ride_info'
...
//Defining router
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/rides/:car', component: Rides, name: 'rides' },
{ path: '/ride_info/:ride_index', component: RideInfo, name: 'ride_info' }
]
});
//Defining vuex store
const store = new Vuex.Store({
state: {
isLoggedIn: !!localStorage.getItem("token"),
data: {}
},
mutations: {
login (state) {
state.isLoggedIn = true;
},
logout (state) {
state.isLoggedIn = false;
},
set_initial_data(state, data) {
state.data = data;
}
},
actions: {
login({ commit }, token) {
localStorage.setItem("token", token);
commit("login");
},
logout({ commit }) {
localStorage.removeItem("token");
commit("logout");
},
set_initial_data({commit}, data) {
commit("set_initial_data", data);
}
},
getters: {
isLoggedIn: state => {
return state.isLoggedIn
},
data: state => {
return state.data
}
}
});
//Starting the app
const app = new Vue({
router,
store,
mounted: function() {
console.log("app mounted");
var that = this;
$.get("/initial_data/", {}, function(data) {
that.$store.dispatch('set_initial_data', data);
});
}
}).$mount('#app');
Когда я захожу на http://localhost:8000/rides/123 и обновляюсь, я вхожу в смонтированную функцию и получаю исходные данные, как и должен.
Когда я захожу на http://localhost:8000/ride_info/123 и обновляюсь, я не попадаю в смонтированную функцию и не переношу данные.
Любая идея, почему это происходит, и как я могу заставить приложение переходить к смонтированной функции при каждом обновлении независимо от URL?