Vue学习日记（三）——Vue路由管理vue-router

前言

为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定仍是来一个实战教程来带你们更加的去深刻理解vue-router，在这以前，读者先自行了解和去官网下载npm和node，附：npm官网

项目构建

这里我采用vue-cli+webpack构建初始项目，在vue官网里面也有相关介绍，在这里我就手把手教你们一下吧，先经过控制台进入相关的文件目录下，而后输入

# 后面是注释
# $表示当前文件目录

# 全局安装 vue-cli
$ npm install --global vue-cli
# 建立一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
# 运行项目my-preoject
$ npm run dev

• npm install --global vue-cli 下载构建工具

• vue init webpack my-project 初始化项目

  

• npm install 下载相关资源到node_models

• npm run dev 运行项目后，在浏览器输入http://localhost:8080/#/可看到

介绍vue-router

通过上面简单的构建以后，一个项目的初始化就完成了，这里vue-cli和webpack已经帮咱们弄好了文件目录结构和基本目录

在进行使用vue-router以前，我不得不也先介绍一下vue-router是什么？

它是一个vue.js下的路由组件，那什么是路由呢？网上有一大堆官方的介绍，相信对于小白是难以理解的，这里我就简单的说明一下吧。

其实路由也就是url，url是什么呢？url就是惟一资源定位符，简单的说，也就是标记页面的惟一存在的一个标签，就像https://www.baidu.com，这里的www.baidu.com就是惟一资源定位符，https就只是一种协议，规范计算机网络的通讯协议。

介绍完这些，那么对于咱们究竟该怎么用呢？

其实很简单，在平时当中，咱们就常常碰到在一个网站里面点击连接会弹到另一个页面，而后就能够发现他们的url改变了，而vue-router就是这样，在同个域名下（这里的域名是http://localhost:8080），改变域名后面的字符参数，好比http://localhost:8080/me和http://localhost:8080/you是两个不一样的页面就是靠vue-router进行实现的。

引用vue-router

若是你在以前没有安装vue-router的话，建议能够先去官网，看着文档使用npm安装一下，这里就很少作介绍了。

首先我先在项目my-project/src/components（存放组件的目录）里面添加两个文件me.vue和you.vue

// me.vue
<template>
  <div>
    我是me
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

// you.vue
<template>
  <div>
    我是you
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

而后修改my-project/src/router（存放路由相关信息的目录）下面修改index.js成

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 导入组件
import me from '../components/me'
import you from '../components/you'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 将组件命名到路由上，输入http://localhost:8080/#/me
    // 便可进入不一样的页面
    {
      path: '/me',
      component: me
    },
    // 将组件命名到路由上，输入http://localhost:8080/#/you
    // 便可进入不一样的页面
    {
      path: '/you',
      component: you
    }
  ]
})

这样只会输入http://localhost:8080/#/me就会进到其余页面，是否是很简单，
那么咱们怎么在页面里面进行跳转呢？

这就运用到了更有趣的知识了就是router-link你只要在你的组件的代码下输入

<router-link :to="/me">这里是跳转连接</router-link>

网页就自动跳转到http://localhost:8080/#/me页面了，可是这样老是很差的，由于，若是因为一些缘由，咱们想修改路由的名字（好比me改为him）就得改两个文件的信息，所以，vue团队也早就想好了，就是name属性，将my-project/src/router（存放路由相关信息的目录）下面修改index.js成

// ...
    {
      path: '/me',
      name: 'me',
      component: me
    },
    // ...

而后跳转就改为

<router-link :to="{ name: 'me'}">这里是跳转连接</router-link>

就能够进行跳转了

高级应用

1. 前端路由 最初级的应用，就和上面的引用同样，固然还能够经过js代码来改变，这个也很简单，就是好比添加一个按钮，点击按钮经过js跳转到其余页面，就是重定向，简单的js代码也下面这样，就能够跳转到其余页面了

vue.$router.push('/me')

1. 动态路由 经过router-link传递参数，例如<router-link :to="{ name: 'user', params: { userId }}">User</router-link>，传入userId这个参数，进行渲染不一样的路由信息
2. 嵌套路由 嵌套路由其实简单的理解就是，子路由，例如，我想在me下面在添加几个路由him和she那上面的代码能够这样写以后输入http://localhost:8080/#/me/him就能够进入到子路由的页面

// ...
    {
      path: '/me',
      name: 'me',
      component: me，
      children: [
        {
            path: 'him'
            // ...
        },
        {
            path: 'she'
            // ...
        }
      ]
    },
    // ...

1. 懒加载 结合异步组件以及在组件的created钩子上触发获取数据的ajax请求，能够最大化的下降加载时间，减小流量消耗。这个对于没有项目的人可能接触比较少，建议先知道这个概念。
2. 重定向 能够实现某些须要根据特定逻辑改变页面本来路由的需求，例如简单的未登陆状态下的页面访问“我的信息”路由时应该重定向到登陆路由页面。
3. History的控制 History是Html5的新语法，我的以为就是对于跳转的时候，特别是微信小程序，就是控制点击回退按钮的时候不至于退出页面而跳转到本身想要的页面

总结

其实还有不少高级应用场景，我就不一一列举出来了，由于这些其实最好仍是上官方文档进行说明，我这里只是解释一下简单的用法，以及初学者可能对官方文档会有误解来进行说明一下，但愿你们仍是学会看API，附官网地址