【vue2.0进阶】vue-router10分钟快速入门
又一周过去了,时间过得很快,更新不能落下,继续我们的vue2.0进阶教程。今天前端君来跟大家一起快速入门vue-router。
学一个新东西之前,我们一定先要学会问:它有什么作用,为什么要学它?
对于SPA ( single pageapplication 单页面应用),尤其是做移动端的网页应用,由于使用 <a/> 标签实现页面的切换和跳转,会有一定的加载时间消耗,经常遇到这样的画面:
网速慢一点的时候,就一直在加载,严重影响产品的用户体验,这也是(html5)移动端网页应用在使用流畅度干不过原生app的地方之一。
所以常用的做法将网页应用做成一个SPA单页面应用,用视图切换(隐藏和显示)来模拟页面的切换。而但你的项目使用了vue进行开发,那么在实现视图切换的时候,你就可以借助vue-router来帮助你方便地实现视图切换。
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建SPA单页面应用。vue的单页面应用是基于路由和组件的,相当于传统页面是基于 <a/> 标签链接和页面,路由用于设定访问路径,并将路径和组件映射起来,这样就可以实现通过路由router来切换组件(视图)。
看着介绍是懂非懂,我们还是来动手实现一遍,才会理解更深刻。下面就跟着前端君来一步一步实现用vue-router来切换视图。
第1步:安装vue-router
创建一个页面,安装引入vue.js和vue-router.js。
你可以使用:直接下载/CND或者NPM进行安装,我们这里用最简单的方式安装:把文件都下载到本地,直接引入。
<script src="js/vue2.0.js"></script>
<script src="js/vue-router.js"></script>
另外附上CND的地址,需要下载vue-router到本地的同学可以访问这个地址:
https://unpkg.com/vue-router@2.5.3/dist/vue-router.js
第2步:准备组件
我们打算实现一个简单的tab选项卡,点击tab就可以切换页面视图。接下来,我们就实现页面的布局。
我们先用传统的 <a/> 标签来编写,这里我们只展示html部分,css部分较为简单,大家可以自行编写。
<div id="app">
<!--左侧导航栏区域-->
<div class="nav">
<a>简易vue</a>
<a>趣味ES6</a>
<a>人在职场</a>
</div>
<!--右侧内容区域-->
<div class="content"></div>
</div>
这里大家注意到了,我们使用的还是我们熟悉的 <a/> 标签,要是想修改成我们今天要学习的vue-router方式,该怎么改写呢?
这里就要介绍vue-router给我们提供的两个新组件: <router-link/> 和 <router-view/> ,它们有什么用呢?
<router-link/> 组件用于帮助用户进行视图导航,也就是我们传统的 <a/> 标签经常做的事。 <a/> 标签用href属性来指定导航的目标地址,而 <router-link/> 组件则用to属性来指定目标地址。
注意:vue-router1.0的导航语法是给 <a/> 标签添加v-link属性。我们这里不展开讲,只介绍vue-router2.0的用法。
<router-view/> 组件负责渲染匹配到的视图组件,也就是渲染<router-link>指向的目标地址。
接下来,我们看看怎么使用!
在上一段代码中,我们稍做修改,改成:
<div id="app"> <!--使用 router-link 组件来导航.--> <!-- 通过传入 `to` 属性指定链接. --> <div class="nav">
<router-link to="/vue"> 简易vue </router-link>
<router-link to="/es6"> 趣味ES6 </router-link>
<router-link to="/career"> 人在职场 </router-link>
</div>
<div class="content"> !--匹配到的组件将渲染在这里 --> <router-view></router-view> </div>
</div>
我们用 <router-link/> 替换了原来的 <a/> 标签,原来的 <div class='content'><div/> 里面增加了 <router-view/> 组件。
接下来,我们就来编写javascript部分的代码。
首先,我们的导航中有三个栏目:
1.“简易vue”
2.“趣味ES6”
3.“人在职场”
它们会导航指3个对应的视图组件,目前我们还没有定义,那么现在我们就来定义三个组件。
//定义路由对应的组件。
//1.简易vue 对应的视图组件
const vueComponent = {
template:`<div>
这里是《简易vue》教程
</div>`
};
//2.趣味ES6 对应的视图组件
const es6Component = {
template:`<div>
这里是《趣味ES6》教程
</div>`
};
//3.人在职场 对应的视图组件
const careerComponent = {
template:`<div>
《混口饭吃》与《工资待遇》
</div>`
};
语法很简单,用json对象的形式定义,至于template属性对应的内容,就是将会被替换渲染到 <router-view/> 组件的内容了。
到了这里,有同学会有疑问了,3个视图组件是准备好了,怎么将这3个组件和 <router-link/> 中的3个导航地址(to属性对应的值)对应关联起来呢?
别猜了,要关联起来,我们可以直接创建一个router实例,创建实例的时候我们需要传参数routes来进行配置,就可以实现定义它们之间的关联关系。
看下面代码:
//创建router实例,并定义导航和组件的映射关系
const router = new VueRouter({
//配置routes
routes:[
//定义3个导航和组件的映射关系
{
path:"/vue",
component:vueComponent
},
{
path:"/es6",
component:es6Component
},
{
path:"/career",
component:careerComponent
},
]
});
代码看起来很简洁,可读性很强,容易理解,但是练习敲这段代码的时候,注意语法,routes的值是个数组类型,数组中每个元素是对象类型。
路由的对应关系我们定义好了,怎么将这个路由使用到我们的页面上去呢?细心的同学发现我们还没创建vue实例呢?
也就是到了最后一步,创建一个vue实例,创建的时候通过配置router参数来注入我们刚刚定义好的router路由。
//创建vue实例,注入路由router
const app = new Vue({
el:"#app",
router //此处是ES6语法,
//相当于router:router
});
就这样,整个实例app就有路由功能了。
是时候打开我们的页面,看看整个文档到底发生了?
我们看看文档渲染之后, <router-link/> 会变成什么样:
( router-link 初次渲染结果 )
三个 <router-link/> 组件被渲染成了 <a/> 标签,而to属性,也变成 <a/> 标签的href属性。
再看看 <router-view/> :
( router-view 初次渲染结果 )
貌似并没有渲染出任何视图组件,那是因为我们还没有尝试任何的导航。
我们点击上面三个导航, <router-view/> 组件就会被渲染成对应的视图组件,我们试试看:
(我是gif,加载需要点时间)
当我们点击左侧的导航的时候,右侧的 <router-view/> 就会渲染出对应的组件,实现视图切换。
就这样,我们就完成了使用vue-router来完成页面中的视图组件切换,我们已经成功入门了vue-router!
推荐
扩展阅读
1.《ECMAScript 6 系列》原创教程
2.《Vue2.0基础系列》原创教程
3.《ECMAScript 6 系列》的 2 套习题
4.《Vue2.0基础系列》的 1 套习题
关于职场
职场感悟:混口饭吃,谈不上喜欢
薪资待遇:如何看待企业提供的岗位待遇
郑州招聘:招聘前端3~5人
广州招聘:招聘前端2人
资源推荐
其实学好技术并不难,架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料!
[总价值超3万!]年薪35万以上的大牛几乎都看了!
加微信: abc15689892 免费领取,由于领取的朋友比较多,所以加微信时一定要备注:555,否则很难通过。
【vue2.0进阶】vue-router10分钟快速入门相关推荐
- 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门
Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的 ...
- vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...
- [.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门
[.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门 1. 什么是正则表达式? 1.1 正则表达式概念 正则表达式,又称正则表示法,英文名:Regular Expression(简 ...
- 1. vue.js的快速入门使用
1. vue.js的快速入门使用1.1 vue.js库的下载1.2 vue.js库的基本使用1.3 vue.js的M-V-VM思想1.4 显示数据2. 常用指令2.1 操作属性2.2 事件绑定例如:完 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- Vue-60分钟快速入门篇-下篇
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- 2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
- thinkcmf搭建教程_5分钟快速入门
# 5分钟快速入门 [TOC=1,5] ## 1.创建模板目录 在`public/themes/`目录下创建`quick_start`目录 ## 2.添加模板描述文件 在`public/themes/ ...
- 深入理解 Redis Template及4种序列化方式__spring boot整合redis实现RedisTemplate三分钟快速入门
概述 使用Spring 提供的 Spring Data Redis 操作redis 必然要使用Spring提供的模板类 RedisTemplate, 今天我们好好的看看这个模板类 . RedisTem ...
最新文章
- [html] 请使用canvas画一个椭圆
- 工作117:eachat图
- 泰山行宫碧霞元君祠_临清市泰山行宫碧霞元君祠5月4号(农历三月三十日)举行大型泰山奶奶接驾法会...
- 思考:那么些大学生仅凭个人好恶来判断,缺乏是非观
- 最经典的职场十大理论,好文值得一看滴童鞋们。2
- 你可能小赚,但苹果永远不亏!华强北老板说一台新iPhone只赚10块钱?
- PostgreSql 分页limit
- 网络编程(三)--通信循环、链接循环、粘包问题
- 各种版本的Linux 镜像下载网址
- 红帽子linux 9.0下载,红帽子 RedHat linux 9.0 简体中文正式版 下载地址
- COPRA算法学习笔记
- 傅里叶级数 画初音 附底层代码
- Could not retrieve transation read-only status server 的解决办法
- ArtWork(并查集+降维)
- IV转换电路原理图|电流转电压测试电路
- 四则运算(二叉树实现) Java
- 微信公众平台java版本开发
- 如何使用包含iApps的 F5 分布式云机器人防御轻松保护BIG-IP应用
- 松勤软件测试试题,如果让你测试一个完全不熟悉的系统,你会怎么办?
- GitHub 开源了多款字体「GitHub 热点速览 v.22.48」
热门文章
- 编写程序,对用户输入的n个整数,统计其最大数、最小数和平均值
- cad缩放工具怎么用_小米电视怎么投屏?这个投屏工具真的太好用啦!
- 分析方法的基础 — 2.业务与管理的拆分,破解难题的钥匙
- 【新书速递】你想知道的通信“灵魂三问”都在这里……(福利再现)
- 5G的来龙去脉及未来
- 作者:孙傲冰(1978-),男,博士,东莞中国科学院云计算产业技术创新与育成中心电子政务事业部副研究员...
- 【C语言】数组和指针相关 * 和 总结大全
- 【Java】不使用比较运算符构造max()和min()
- 需求分析——掌握UML建模语言的用例图
- 喜讯 | 国际智慧城市大会巨杉喜获两项大奖