一、理解概念

1、路由：路由就是指向的意思，白话来说就是点击什么按钮，然后就跳转到对应的页面内容。如：点击按钮home，跳转到home页面。

2、理解route,routes,router

      route,是路由的意思，如home按钮 点击到页面  home，这个就是一条route,定义route分为两部分，其一是path路径，其二是component组件 =====>{path:'/home ',component:home}。

      而routes是复数，可以把routes看做route的集合/数组。

      router就当做一个管理者，去管理路由的。当用户点击home按钮的时候，请求到home页面内容，router知道了，就去管理了，然后就去了routes里去找到那个具体的route，找到了对应的home页面内容，被渲染出来。

3、路径和组件是对应起来的，再在页面中渲染出来。

4、把所要点击的按钮用<router-link to=' '></router-link>包裹起来。

5、router-link渲染成了<a>标签，to=''引号里的渲染成了<a>标签的href

二、实例

实现效果，点击“人”，调转到登录页面，如下图

这里的登录页面的内容我就简单写了几个字。

登录页面

步骤：

1、新建组件login.vue；

2、在App.vue中定义<router-view></router-view>;

3、在home.vue中定义点击后跳转到哪个路径（因为我的点击按钮存在于home.vue中）；如下图

使用<router-link to=" "></router-link>       引号内填入要跳转的路径

4、在mian.js里定义router，就是定义路径到组件的映射

     1）引入组件

     2）告诉vue使用vueRouter

     3)   配置路由

     4）注入到根实例中

如下图：

三、注意点

1、路由的路径一定要配置正确；新手容易搞不懂路径的正确写法，可以去查找一下：这里简单说一下

"./" ====>当前目录下

"../" ====>当前目录下的上一级目录

而配置路由的时候，前面不需要“.”

正确路径

          一开始我因为路由的路径写错了，导致页面渲染不出来，如下图，是错误的路径，只是加了‘./’

错误路径