leftso 9645 0 2020-04-02 17:39:21

文章位置:左搜> 编程技术> Vue.js使用教程> 正文
vue-router 中 routers 定义写法,讨论 require 的使用与否
router
首先上 router的index.js
import Vue from 'vue'
import Router from 'vue-router'
//首页
//import index from '@/components/index'
//产品中心
import productCenter from '@/components/productCenter/productCenter.vue'
//商务合作
import teamwork from '@/components/teamwork/teamwork.vue'
//咨询中心
import askCenter from '@/components/askCenter/askCenter.vue'
//关于中棋
import aboutUs from '@/components/aboutUs/aboutUs.vue'
 
 
Vue.use(Router)
 
export default new Router({
  routes: [
  //首页
    {
      path: '/',
      name: 'index',
      component:resolve =>require(['index'],resolve)
    }
    //产品中心
    ,{
      path: '/productCenter',
      name: 'productCenter',
      component: productCenter
    }
    //商务合作
    ,{
      path: '/teamwork',
      name: 'teamwork',
      component: teamwork
    }
    //咨询中心
    ,{
      path: '/askCenter',
      name: 'askCenter',
      component: askCenter
    }
    //关于我们
    ,{
      path: '/aboutUs',
      name: 'aboutUs',
      component: aboutUs
    }
  ]
})
重点说明:
  • 提示:import 引入时用到的“@”就相当于“..”;
  • 我们看到index页面是用的require的方式写的路由,所以上面的import就注释掉了,这种写法的好处,不仅仅是简单,还有这样写是按需加载,访问此路由时才加载这个js,会避免进入首页时加载内容过多,因为import引入,当项目打包时路由里的所有component都会打包在一个js中,而用require会将你的component分别打包成不同的js。

最后总结:

推荐使用require 方式编写routers,按需加载节约资源。

评论区域

暂无评论,快来抢首发吧!!!