vue-router 中 routers 定义写法

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(32340)   2024-03-16 09:30:11

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,按需加载节约资源。

标签: vue-router
地址:https://www.leftso.com/article/768.html

相关阅读

vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
一、vue-router路由跳转分为两大类编程式的跳转:router.push声明式的跳转:<router-link&gtl;二、编程式的跳转分为三种1、this.$router.push...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:va...
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body&gtl;     <di...
meta字段(元数据)直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作
普通写法​vantUI 使用字体图标和文字<template&gtl; <van-tabbar v-model="active" active-color="#07c160"&gtl...
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataLis...
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来