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");
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
近期项目中大量使用async,从服务器获取数据,解决一些并发传参问题,代码很简单,在此也看了一些博客,现在async/await已经大范围让使用,所以本文给大家介绍一下vue使用async/await来实现同步和异步的案例,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了在vue中实现echarts随窗体变化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue无法读取HTMLCollection列表的length问题解决
这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue移动端的左右滑动事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
本文主要介绍了el-table嵌套el-popover处理卡顿的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了vue 路由meta 设置导航隐藏与显示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
vue使用element-plus依赖实现表格增加的示例代码
这篇文章主要为大家详细介绍了vue使用element-plus依赖实现表格增加,文中示例代码讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2023-12-12
这篇文章主要给大家介绍了关于Vue3中watchEffect用途的相关资料, watch和watchEffect都是监听器,但在写法和使用上有所区别,本文进行了详细的介绍,需要的朋友可以参考下2021-07-07
element el-input directive数字进行控制
本文介绍了vue使用directive 进行控制的方法，使用element开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的，就有一定的参考价值，有兴趣的可以了解一下2018-10-10
最新评论