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