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");
});

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

(0)

相关推荐

  • vue-router 源码实现前端路由的两种方式

    在学习 vue-router 的代码之前,先来简单了解一下前端路由. 前端路由主要有两种实现方法: Hash 路由 History 路由 先来看看这两种方法的实现原理. 接着我们将用它们来简单实现一个自己的前端路由. 前端路由 Hash 路由 url 的 hash 是以 # 开头,原本是用来作为锚点,从而定位到页面的特定区域.当 hash 改变时,页面不会因此刷新,浏览器也不会向服务器发送请求. http://www.xxx.com/#/home 同时, hash 改变时,并会触发相应的 has

  • vue-router重定向不刷新问题的解决

    前阵子太忙了,自己一个人一边开发着新项目,一边维护着旧项目,没时间写博客,终于让我腾出时间了.废话少说,开始正文. 问题描述: 之前项目是angular开发的,后来用vue重构后.项目路径和vue路径不一致,但是app端分享出的链接,依旧是旧项目链接. 解决方法: 通过阅读vue-router的官方文档,发现重定向可以解决这个问题. 如之前文件路径是'/live/detail/id=7234','/skill/microList/',新项目路径是 '/s/live/detail?id=7234'

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • vue-router+nginx 非根路径配置方法

    vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 一般情况下,我们不喜欢丑丑的hash,类似于index.html#/matchResult,可以使用路由的history模式.history模式是利用history.pushState API来实现页面跳转. 但是有个问题,在使用nginx的时候,我们需要添加一些配置. 直接配置在根路径下 直接配置在根路径下,访问的时候只用输入http://yoursite.com,

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

  • vue-router 源码之实现一个简单的 vue-router

    前言 通过上篇,我们知道前端理由的两种实现方法,Hash 路由与 History 路由,并且用它们分别实现了一个前端路由. 接下来我们就将 Vue 与 Hash 路由结合,实现一个非常简单的 vue-router 吧. 开始实现 想象一下,如果自己实现了一个 vue-router,会怎么去使用呢?参考 vue-router 官方的使用方式,看看 html 的使用: <div id="app"> <p> <router-link to="#/&qu

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • vue-router history模式下的微信分享小结

    背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt

  • vue-router中scrollBehavior的巧妙用法

    问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></

  • 使用vue-router完成简单导航功能【推荐】

    vue-router是Vue.js官方提供的一套专用的路由工具库 安装命令如下 npm i vue-router -D vue-router 实例是一个Vue插件,我们需要在Vue全局引用中通过Vue.use() 将它接入到Vue实例中. 在我们的工程中,,main.js是默认的程序入口文件,所有的全局配置都会在这个文件中进行. 我们在main.js中加入如下引用 import VueRouter from 'vue-router' Vue.use(VueRouter) 这样就完成了 vue-r

随机推荐