详解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 相关文章推荐
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 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
PHP 编程安全性小结
2010/01/08 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL