router.js
import Vue from 'vue'import Router from 'vue-router'import Index from './views/Index.vue'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'index', component: Index }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }, { path: '/info/:id', name: 'info', component: () => import('./views/ShopInfo.vue') } , { path: '/guid', name: 'guid', component: () => import('./views/Guid.vue') } ]})
store.js
import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({ state: { user: {}, shops: [], baseUrl: 'http://plateform.com:81', shopInfo: {} }, getters: { user(state) { return state.user; }, shops(state) { return state.shops; }, baseUrl(state) { return state.baseUrl; }, shopInfo(state) { return state.shopInfo; } }, mutations: { setUser(state, user) { state.user = user }, setShops(state, shops) { shops.forEach((v) => { state.shops.push(v) }) }, setShopInfo(state, shopInfo) { state.shopInfo = shopInfo; } }, actions: { //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。 getShopInfo({state, commit}, param) { return new Promise((resolve,reject)=>{ console.log('getShopInfo') axios.get(state.baseUrl + '/api/shop/' + param.id) .then((data) => { console.log(data) commit('setShopInfo', data.data) resolve(); }) .catch((err) => { console.log(err) reject(); }) }) } }})
main.js
import Vue from 'vue'import App from './App.vue'import store from './store'//引入sotreimport router from './router'//引入routerimport axios from 'axios'Vue.config.productionTip = falserouter.beforeEach((to, from, next) => { console.log('进入守卫') console.log(to)})new Vue({ store, router, render: h => h(App)}).$mount('#app')