详解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 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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学习笔记之二 php入门知识
2011/01/12 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php微信开发之图片回复功能
2018/06/14 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
详解Vue整合axios的实例代码
2017/06/21 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Django实现网页分页功能
2019/10/31 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
几个数据库方面的面试题
2016/07/01 面试题
年终自我鉴定
2013/10/09 职场文书
升旗仪式主持词
2014/03/19 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers