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实现在data里引入相对路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue-Router-添加全局$router属性,在 Vue 中有一个 mixin 方法，这个方法会在每个组件创建之前被调用，我们可以在这个方法中将 VueRouter 实例挂载到 Vue 实例上，本文给大家介绍的非常详细，需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue二次封装axios为插件使用详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
今天小编就为大家分享一篇关于Vue项目安装插件并保存，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了Vue替代vuex的存储库Pinia，听说pinia与vue3更配,便开启了vue3的学习之路，pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态2022-09-09
VUE项目启动没有问题但代码中script标签有蓝色波浪线标注
这篇文章主要给大家介绍了关于VUE项目启动没有问题但代码中script标签有蓝色波浪线标注的相关资料,文中将遇到的问题以及解决的方法介绍的非常详细,需要的朋友可以参考下2023-05-05
vscode 使用Prettier插件格式化配置使用代码详解
这篇文章主要介绍了vscode 使用Prettier插件格式化配置使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了使用konva和vue-konva完成前端拖拽滑块验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了Vue实现动态显示表单项填写进度功能，此功能可以帮助用户了解表单填写的进度和当前状态，提高用户体验，通常实现的方式是在表单中添加进度条，根据用户填写状态动态更新进度条，感兴趣的同学可以参考下文2023-05-05
这篇文章主要介绍了关于Vue CLI3中启动cli服务参数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论