详解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 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php和nginx交互实例讲解
2019/09/24 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
详解javascript高级定时器
2015/12/31 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
企业员工培训感言
2014/02/26 职场文书
计算机求职信
2014/07/02 职场文书
技术经济专业求职信
2014/09/03 职场文书
爱心募捐通知范文
2015/04/27 职场文书
廉政承诺书2015
2015/04/28 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
python Django框架快速入门教程(后台管理)
2021/07/21 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers