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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
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
多重?l件?合查?(一)
2006/10/09 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
利用ctypes提高Python的执行速度
2016/09/09 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
网上签名寄语活动留言
2014/01/18 职场文书
小学班主任寄语大全
2014/04/04 职场文书
入党介绍人评语
2014/05/06 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年保卫工作总结
2014/12/05 职场文书
新年寄语2016
2015/08/17 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript