详解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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
javascript数据类型验证方法
Dec 31 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
详解Python打包分发工具setuptools
2019/08/05 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python实现简单井字棋游戏
2020/03/04 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
毕业实习评语
2014/02/10 职场文书
企业业务员岗位职责
2014/03/14 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技