脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → requireJs中引入vue-router

vue系列之requireJs中引入vue-router的方法

 更新时间：2018年07月18日 09:09:36   作者：zhouzhou  
这篇文章主要介绍了vue系列之requireJs中引入vue-router的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

requireJs简介

参数配置

requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。

require
define

其中define是用于定义模块，而require是用于载入模块以及载入配置文件。

define([id,deps,] callback);
require(deps[,callback]);

加载配置文件

独立的引入配置文件也有两种方式，一种是通过script标签加载外部JS文件形式：

<script src="js/require.js"></script>
<script src="js/app.js"></script>

另一种方式则是使用 require 提供的 data-main 属性，该属性是直接写在引入require.js的script标签上，在require.js 加载完毕时，会自动去加载配置文件 app.js。

<script data-main="js/app" src="js/require.js"></script>

通过 data-main 去加载入口文件，便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置，相比之下我更加推荐这种方式，因为它更可能的方便快捷。

<script data-main="js/app.js" src="js/require.js"></script>

注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

常用参数配置

urlArgs

RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例：
javascript:;urlArgs: "bust=" + (new Date()).getTime()
在开发中这很有用，但请记得在部署到生成环境之前移除它。

deps

用于声明require.js在加载完成时便会自动加载的模块，值是一个数组，数组元素便是模块名。

config

config属性可以为模块配置额外的参数设定，其使用格式就是以模块名或者模块ID为key，然后具体的参数为value。

shim

shim为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

require.config({
  baseUrl : "./src",
  paths :{
    jquery:"./lib/jquery.min",
    vue:"./lib/vue",
    vueResource:"./lib/vue-resource.min",
    vueX:"./lib/vuex",
    api :"./api/index",
    lodash : "./lib/lodash.min",
    bootstrap : "./assets/js/bootstrap/js/bootstrap.min",
    ripples : "./assets/js/bootstrap-material-design/js/ripples.min",
    material:"./assets/js/bootstrap-material-design/js/material.min"
  },
  shim : {
    bootstrap : ['jquery'],
    ripples:['jquery'],
    material:['jquery'],
  },
  packages: [
    {
      name: 'components',
      location: 'component',
      main: 'components'
    },
    {
      name : "vuex",
      location :"vuex",
      main : "vuex"
    }
  ]
});

vue项目

requirejs配置

require.config({
  baseUrl : "./src",
  paths :{
    vue:"./lib/vue",
    vueRouter: "./lib/vue-router",
    promise: "./lib/q",
    router: "./js/router",
    header: "./js/components/header"
  },
  shim : {
    vueRouter : ['vue']
  }
});

router配置

define(["resolve"], function(resolve){
  return [
    {
      path: "/home",
      name: "home",
      component: resolve("../js/xx.js")
    },
    {
      path: "/news",
      name: "news",
      component: resolve("../js/xx.js")
    }
  ];
});

resolve.js

define(["require", "promise"], function(require, Q){
  var resolve = function(dep) {
    return function() {
      if (!(dep instanceof Array)) {
        dep = [dep];
      }
      var deferred = Q.defer();
      require(dep, function(res) {
        deferred.resolve(res);
      });
      return deferred.promise;
    };
  };
  return resolve;
});

index

<body>
  <header></header>
  <router-view></router-view>
</body>
require(["vue", "vueRouter", "router", "header"], function(vue, vueRouter, router, header) {
  vue.use(vueRouter);
  var routes = new vueRouter({
    routes: router
  });
  new Vue({
    router: routes,
    data: function(){
      return {
        aa: true
      };
    }
  }).$mount("body");
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中子组件向父组件传递数据的实例代码(实现加减功能)

    vue中子组件向父组件传递数据的实例代码(实现加减功能)

    这篇文章主要介绍了vue中子组件向父组件传递数据的实例代码(实现加减功能) ,需要的朋友可以参考下
    2018-04-04
  • 详解Vue中的keep-alive

    详解Vue中的keep-alive

    这篇文章主要为大家介绍了Vue中的keep-alive，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • vue router 动态路由清除方式

    vue router 动态路由清除方式

    这篇文章主要介绍了vue router 动态路由清除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • VUE3页面div如何点击改变样式

    VUE3页面div如何点击改变样式

    这篇文章主要介绍了VUE3页面div如何点击改变样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue对枚举值转换方式

    vue对枚举值转换方式

    这篇文章主要介绍了vue对枚举值转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 如何使用el-table实现纯前端导出(适用于el-table任意表格)

    如何使用el-table实现纯前端导出(适用于el-table任意表格)

    我们日常做项目,特别是后台管理系统,常常需要导出excel文件,这篇文章主要给大家介绍了关于如何使用el-table实现纯前端导出的相关资料,本文适用于el-table任意表格,需要的朋友可以参考下
    2024-03-03
  • vue.js动态组件和插槽的使用汇总

    vue.js动态组件和插槽的使用汇总

    这篇文章主要介绍了vue.js动态组件和插槽的使用汇总，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-05-05
  • 解决前端调用后端接口返回200但数据返回的是html标签

    解决前端调用后端接口返回200但数据返回的是html标签

    这篇文章主要给大家介绍了关于如何解决前端调用后端接口返回200但数据返回的是html标签的相关资料,文中通过图文将解决的过程介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考解决价值,需要的朋友可以参考下
    2024-05-05
  • 详解Vue之事件处理

    详解Vue之事件处理

    这篇文章主要介绍了Vue之事件处理的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下。
    2020-07-07

最新评论