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

说明：

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

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

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

 1.Vue.js系列之项目搭建（1）

 2.Vue.js系列之项目结构说明（2）

概述

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.在组件中使用路由

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

下面这个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)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vuejs  # router  # 详解Vue.js项目API、Router配置拆分实践  # vue.js vue-router如何实现无效路由(404)的友好提示  # 详解Vue.js搭建路由报错 router.map is not a function  # vue.js中Vue-router 2.0基础实践教程  # Vue.js实战之利用vue-router实现跳转页面  # Vue.js路由vue-router使用方法详解  # Vue.js：使用Vue-Router 2实现路由功能介绍  # Vue.js路由组件vue-router使用方法详解  # Vue.js第二天学习笔记（vue-router）  # 实例讲解Vue.js中router传参  # 跳转  # 比较多  # 给大家  # 几点  # 首页  # 小编  # 官网  # 系列之  # 自己的  # 的是  # 都是  # 就好了  # 就会  # 都有  # 来了  # 在这里  # 在此  # 说了  # 我只  # 是基于 

相关文章： 建站主机核心功能解析：服务器选择与网站搭建流程指南  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  制作网站外包平台,自动化接单网站有哪些？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  宝塔Windows建站如何避免显示默认IIS页面？  企业微网站怎么做,公司网站和公众号有什么区别？  建站之星上传入口如何快速找到？  如何用免费手机建站系统零基础打造专业网站？  建站之星代理如何获取技术支持？  如何用PHP快速搭建CMS系统？  北京专业网站制作设计师招聘,北京白云观官方网站？  如何使用Golang安装API文档生成工具_快速生成接口文档  如何快速搭建虚拟主机网站？新手必看指南  建站之星如何取消后台验证码生成？  如何自定义建站之星网站的导航菜单样式？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  建站168自助建站系统：快速模板定制与SEO优化指南  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  如何快速配置高效服务器建站软件？  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  网站微信制作软件,如何制作微信链接？  如何在Golang中使用replace替换模块_指定本地或远程路径  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  建站之星导航配置指南：自助建站与SEO优化全解析  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  深入理解Android中的xmlns:tools属性  创业网站制作流程,创业网站可靠吗？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  制作电商网页,电商供应链怎么做？  沈阳制作网站公司排名,沈阳装饰协会官方网站？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  无锡营销型网站制作公司,无锡网选车牌流程？  如何快速查询网站的真实建站时间？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  已有域名如何免费搭建网站？  如何快速搭建响应式可视化网站？  如何通过VPS建站无需域名直接访问？  建站之星导航菜单设置与功能模块配置全攻略  如何正确下载安装西数主机建站助手？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  建站主机CVM配置优化、SEO策略与性能提升指南  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  建站之星展会模版如何一键下载生成？  制作农业网站的软件,比较好的农业网站推荐一下？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  设计网站制作公司有哪些,制作网页教程？  建站之星客服服务时间及联系方式如何？