详解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模拟订火车票和退票示例
Apr 24 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
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 版本]
2007/03/20 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
jQuery中:selected选择器用法实例
2015/01/04 Javascript
js简单抽奖代码
2015/01/16 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
百度小程序自定义通用toast组件
2019/07/17 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
python模块之re正则表达式详解
2017/02/03 Python
python机器学习之神经网络(三)
2017/12/20 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Python中如何添加自定义模块
2020/06/09 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
光声世纪笔试题目
2012/08/25 面试题
财务总监岗位职责
2014/03/07 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
小学运动会班级口号
2014/06/09 职场文书
员工生日会策划方案
2014/06/14 职场文书
总结Python使用过程中的bug
2021/06/18 Python