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/>'
})