vue-router，vuex

vue设置路由为了服务器渲染今天换另一种方式首先在文件夹中router建立router和routes两个js文件，router用来设置路由，routes用来建立路由代码如下：

router:

import Todo from '../components/views/Todo'
import Login from '../components/views/Login'
export default [
  {path:'/',
    redirect:'/app'

  },
  {
    path:'/app',
    component:Todo
  },
  {
    path:'/login',
    component:Login
  }
]

routes:

import Router from 'vue-router'
import routes from './router'
/*const router = new Router({
  routes
})
 export default router

不要这么写要如下这么写因为我们要服务端渲染如果像刚才那么写就会出现内存溢出的问题，项目中需要用到服务端渲染，如果文件只 export 一个 router，
导致服务端渲染时，出现内存溢出的问题。如果只有 一个 router， 每次服务端渲染都会生成一个新的 app，而 router 只有一个对象，就会缓存每次新建的 app，
导致 app 对象在服务端渲染完成之后没有被释放掉，最后内存溢出。

export default  () =>{
  return  new Router({
    routes,
    // 取消历史哈希
    mode:'history',
    //给路由添加参数去掉也能跳转到相应的路径不去掉也能跳转到相应的了路径
    base:'/base/',
    //如果页面滚动时候如果有保存原来的位置则跳转的时候还在原来的位置否则在页面的最上面和最左面
    // 路由跳转的时候相应的class设置方便设置样式
    linkActiveClass:'active-link',
    linkExactActiveClass:'exact-active-link',
    scrollBehavior (to,from,savedPosition){
      if (savedPosition) {
        return
      }else {
        return {x:0,y:0}
      }

    }
  })
}
在main.js中设置如下：

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vuex from  'vuex'
Vue.use(Vuex)
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueRouter)
import createRouter from './router/routes'
const router = new createRouter()
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

因为我们要服务端渲染如果像刚才那么写就会出现内存溢出的问题
同样vuex也可以采用和上面vue-router的形式构建代码：sore.js代码如下：

import Vuex from 'vuex'
import Vue from 'vue'
//自所以用defaultState是因为我们要服务端渲染的过程因为我们default数据没有和业务相关内容
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
Vue.use (Vuex)
export default () =>{
  return new Vuex.Store ({
    strict :isDev,
    state:defaultState,
     mutations,
     getters,
    actions
  })
}

main.js代码如下：

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import creatRouter from './router/router'
import createStore from './store/store'
import Vuex from 'vuex'
Vue.use (Vuex)
Vue.use (VueRouter)
const store = createStore()
const router = creatRouter ()

let app = new Vue ({
  el: '#app',
  template:
  data: {
    text: 1
  }，
  router,
  store,
  components: {App},
  template: '<App/>'
})