vue-router

Posted 2021-01-26 zhx119

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

因为我们要服务端渲染如果像刚才那么写就会出现内存溢出的问题