Vue.js系列之vue-router(上)(3)


Posted in Javascript onJanuary 03, 2017

说明:

我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。

概述

Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧。一般的单页面应用是基于路由或页面之间的链接来形成的,Vue是基于路由和组件的,所以我们今天就来了解下vue-router。vue-router是Vue.js官方的路由插件,它和vue.js深度集成,用于设定访问路径,并将路径和组件映射起来,我们给每个组件一个路由地址,跳转路由相当于组件切换。vue-router的内容还是比较多的,这里我只分享我自己项目中用到的地方,其他地方大家可以看文档啦。

vue-router官网:http://router.vuejs.org/zh-cn/(中)

英文官网你知道啦,直接去掉后面的"zh-cn/"就好了。

开始使用vue-router

这里我假设大家之前都用模块工程的方式实践了一个vue Demo,在此基础上我们添加vue-router。

1.安装

npm install vue-router

2.在项目main.js中安装路由插件

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter)

3.在组件中使用路由

先看下路由跳转的效果吧,大家注意看地址栏变化哈。

Vue.js系列之vue-router(上)(3)

下面这个tabBar就是一个组件(偷偷告诉你,在微信小程序中,这个功能直接配置app.json文件就好了)

每个tab点击时路由地址会相应变化,其实是渲染相应的组件,具体我们来看代码。

footer.vue组件

<template> 
  <div class="footer"> 
    <div class="readType" v-if="readType.count">{{readType.count}}</div> 
    <ul class="main-nav"> 
      <li> 
        <router-link to="/home"> 
          <i class="icon-nav icon-nav1"></i><span>首页</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/quan" v-bind:class="{rrouter:activ}"> 
          <i class="icon-nav icon-nav2"></i><span>学友圈</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/friend"> 
          <i class="icon-nav icon-nav3"></i><span>学友</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/find"> 
          <i class="icon-nav icon-nav4"></i><span>发现</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/mine"> 
          <i class="icon-nav icon-nav5"></i><span>我的</span> 
        </router-link> 
      </li> 
    </ul> 
  </div> 
</template>

这里有几点需要知道:

1.使用 router-link 组件来导航.

2.通过传入 `to` 属性指定链接.

3.<router-link> 默认会被渲染成一个 `<a>` 标签

路由出口

我们前面说了,路由跳转就是相应组件在渲染,那么渲染的内容是怎么显示也页面中的呢,那就是路由出口'<router-view></router-view>'做的事了,路由匹配到的组件将渲染在这里。

路由出口我们可以设置在当前组件中也可以设置在其他组件中,项目中我们就将所有组件都渲染在最大的容器App.vue组件中(我们项目中App组件只作为渲染容器)。

<template> 
 <div id="app"> 
  <router-view></router-view> 
 </div> 
</template>

JavaScript

定义路由文件可以直接写在main.js文件中,也可以新建一个js文件,因为我们的组件比较多,所以单独把路由拿出来写了一个router.js文件。

// 0. 如果使用模块化机制编程,进入Vue和VueRouter,要调用 Vue.use(VueRouter) 
import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
// 1. 定义(路由)组件。 
// 可以从其他文件 import 进来,我们一般都是建好了组件再来写路由的 
// 所以就会有好多这样的语句。 
import home form "./components/home" 
import login form "./components/login" 
// 2. 定义路由 
 routes: [ //这里跟1.x有挺大区别,有接触的自己看清楚哦 
  { 
   path: '/',  //浏览器网路请求走通之后默认就会去找域名下的根目录, 
   name: 'home', //所以我们就把这个组件作为默认首页 
   component: home 
  }, 
  { 
   path: '/login', 
   name: 'login', 
   component: login 
  } 
  ] 
// 3. 创建 router 实例,然后传 `routes` 配置 
// 你还可以传别的配置参数, 不过先这么简单着吧。 
const router = new VueRouter({   //你就当const是var 
 routes 
//(缩写)相当于 routes: routes 
}) 
// 4. 创建和挂载根实例。 
// 记得要通过 router 配置参数注入路由, 
// 从而让整个应用都有路由功能 
const app = new Vue({ 
 router 
}).$mount('#app') 
// 现在,应用已经启动了!

总结

上篇先分享到这里,主要了解了有以下几点:

1.vue-router的安装和使用

2.在组件模板中的书写格式

3.知道了路由出口

4.如何定义一个路由

5.创建路由实例和挂载实例

下篇我将给大家继续分享路由的其他用法(项目中用到的):

1.如何实现当前页激活,tab标签同时也激活,即active-class

2.路由跳转时添加过渡动效

3.路由传参及命名路由

4.实现资源懒加载

5.编程式导航

6.router-link的其他表现形式

7.Router构造详细配置

内容有点多,可能还要再分细一点,写详细点。但还是想把自己遇到过的问题,用到的知识点通过自己的理解分享出来。

以上所述是小编给大家介绍的Vue.js系列之vue-router(上)(3),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
js制作提示框插件
Dec 24 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
JavaScript实现自定义媒体播放器方法介绍
Jan 03 #Javascript
JS求解三元一次方程组值的方法
Jan 03 #Javascript
Vue.js系列之项目结构说明(2)
Jan 03 #Javascript
Vue.js系列之项目搭建(1)
Jan 03 #Javascript
jquery实现下拉框多选方法介绍
Jan 03 #Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 #Javascript
详解JavaScript常量定义
Jan 03 #Javascript
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
Python中正则表达式详解
2017/05/17 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
PyQt5实现下载进度条效果
2018/04/19 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
任意存:BOXFUL
2018/05/21 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
授权委托书公证
2014/09/14 职场文书
个人培训总结
2015/03/05 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
毕业设计致谢词
2015/05/14 职场文书
无保留意见审计报告
2015/06/05 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server