vue-router的使用方法

前言：昨天教大家怎么创建vue项目（链接：如何搭建一个vue项目(完整步骤)）
切记创建项目时如下标记的位置一定要安装vue-router

一、了解Vue-router

现在主流的三大框架都有自己的路由实现。

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router
  Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
  vue-touter官方文档👈点击跳转至官方文档
  功能包括：
• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

vue-router是什么？
答：这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的< a>< /a>标签是不起作用的，你必须使用vue-router来进行管理。

二、使用vue-router

如若大家创建项目时没有安装vue-router：npm install vue-router --save安装一下。

在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

• 导入路由对象，并且调用Vue.use(VueRouter)
• 创建路由实例，并且传入路由映射配置
• 在Vue实例中挂载创建的路由实例

使用vue-router的步骤：

• 第一步：创建路由组件
• 第二步：配置路由映射：组件和路径映射关系
• 第三步：使用路由：通过< router-link >和< router-view>

代码实现步骤如下：
index.js ==> 项目配置文件

挂在到vue实例中

创建路由组件

配置组件和路由的映射关系

如何使用

< router-link>：该标签是一个vue-router中已经内置的组件，他会被渲染成一个< a>标签。
< router-view>：该标签会根据当前的路径，动态渲染出不同的组件。

三、如何设置路由的默认路由

默认情况下，进入网站的首页，我们希望渲染首页的内容。
但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。
如何可以让路径默认跳转到首页，并且渲染首页组件呢？
我们需要多配置一个映射就可以了

{
    path: '/',
    redirect: Index
  },

配置解析：
我们在routes中又配置一个映射
path配置的是根路径：/
redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。