详解vue2路由vue-router配置(懒加载)


Posted in Javascript onApril 08, 2017

vue路由配置以及按需加载模块配置

1、首先在component文件目录下写俩组件:

First.vue:

<template> 
 <div>我是第一个页面</div> 
</template> 
 
<script> 
 export default { 
 name: 'first', 
 data () { 
  return { 
  msg: 'Welcome to Your Vue.js App' 
  } 
 } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
 font-weight: normal; 
 } 
 
 ul { 
 list-style-type: none; 
 padding: 0; 
 } 
 
 li { 
 display: inline-block; 
 margin: 0 10px; 
 } 
 
 a { 
 color: #42b983; 
 } 
</style>

Second.vue:

<template> 
 <div>我是第二个页面</div> 
</template> 
 
<script> 
 export default { 
 name: 'second', 
 data () { 
  return { 
  msg: 'Welcome to Your Vue.js App' 
  } 
 } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
 font-weight: normal; 
 } 
 
 ul { 
 list-style-type: none; 
 padding: 0; 
 } 
 
 li { 
 display: inline-block; 
 margin: 0 10px; 
 } 
 
 a { 
 color: #42b983; 
 } 
</style>

2、router目录下的index.js文件配置路由信息:

import Vue from 'vue' 
import VueRouter from 'vue-router' 
/*import First from '@/components/First' 
import Second from '@/components/Second'*/ 
 
Vue.use(VueRouter) 
 
/*const routes = [ 
 //重定向 
 { 
 path:'/', 
 redirect:'first' 
 }, 
 { 
 path: '/first', 
 name: 'First', 
 component: First 
 }, 
 { 
 path: '/second', 
 name: 'Second', 
 component: Second 
 } 
]*/ 
 
//懒加载路由 
const routes = [ 
 {   //当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示first页面 
 path:'/', //重定向,就是给它重新指定一个方向,加载一个组件; 
 component:resolve => require(['@/components/First'],resolve) 
 }, 
 { 
 path:'/first', 
 component:resolve => require(['@/components/First'],resolve) 
 }, 
 { 
 path:'/second', 
 component: resolve => require(['@/components/Second'],resolve) 
 } 
//这里require组件路径根据自己的配置引入 
] 
//最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。 
 
 const router = new VueRouter({ 
 routes 
}) 
 
export default router;

3、main.js中引入路由配置文件:

import $ from 'jquery' 
import Vue from 'vue' 
import App from './App' 
import router from './router' //引入路由配置文件 
import './assets/css/bootstrap.min.css' 
import './assets/js/bootstrap.min' 
Vue.config.productionTip = false 
 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, // 注入到根实例中 
 render: h => h(App) 
})

4、App.vue引入路由配置导航:

<template> 
<router-link to="/first">跳转第一个页面</router-link> 
<router-link to="/second">跳转第二个页面</router-link> 
<div id="view"> 
  <router-view></router-view> 
  </div> 
 
</template> 
 
<script> 
export default { 
 name: 'app' 
} 
</script> 
<style> 
</style>

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

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
jsonp原理及使用
Oct 28 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
js仿微信公众平台打标签功能
Apr 08 #Javascript
详解node.js搭建代理服务器请求数据
Apr 08 #Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 #Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 #Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 #Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 #Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 #Javascript
You might like
加强版phplib的DB类
2008/03/31 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python实现图片插入文字
2019/11/26 Python
Python time库基本使用方法分析
2019/12/13 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python模块相关知识点小结
2020/03/09 Python
《石榴》教学反思
2014/03/02 职场文书
教师专业自荐信
2014/05/31 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
大学生党员个人总结
2015/02/13 职场文书
在校学生证明格式
2015/06/24 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电