详解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 学习笔记(九)call和apply方法
Jan 11 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
微信小程序图表插件wx-charts用法实例详解
May 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实现的json类实例
2015/07/28 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
js实时获取系统当前时间实例代码
2013/06/28 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
在Python中实现字典反转案例
2020/12/05 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
股东出资证明书(正规版)
2014/09/24 职场文书
个人贷款收入证明
2014/10/26 职场文书
环卫个人总结
2015/03/03 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
MySQL优化之慢日志查询
2022/06/10 MySQL
python如何读取和存储dict()与.json格式文件
2022/06/25 Python