前言

为了给读者更好的体验，去理解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>

就可以进行跳转了

高级应用

前端路由最初级的应用，就和上面的引用一样，当然还可以通过js代码来改变，这个也很简单，就是比如添加一个按钮，点击按钮通过js跳转到其他页面，就是重定向，简单的js代码也下面这样，就可以跳转到其他页面了

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

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

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

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

总结

其实还有很多高级应用场景，我就不一一列举出来了，因为这些其实最好还是上官方文档进行说明，我这里只是解释一下简单的用法，以及初学者可能对官方文档会有误解来进行说明一下，希望大家还是学会看API，附官网地址

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

前言

项目构建

介绍vue-router

引用vue-router

高级应用

总结

猜你喜欢