Vue2中路由的介绍和使用
一.路由的基本概念
一说路由，大家首先想到的可能是路由器，路由器的原理就是给连接的设备一个IP地址，通过IP地址来映射到设备，实现连接，本质上是一种映射关系。
在vue2中就是路径与组件间的映射。
路由是使用vue2制作单页面程序的一个重要知识点。
二.路由的基本使用
vue官方提供了一个插件叫vueRouter，可以通过包管理工具或者脚手架安装，这里就不做赘述了，官网的安装教程挺好 链接直达 vueRouter 不知道的可以去看看。
安装完成后，vueRouter的使用还有四个小步骤。
1.引入
import VueRouter from "vue-router";2.注册
Vue.use(VueRouter);3.创建对象
const router = new VueRouter();4.建立关联
new Vue({
el: '#app',
render: h => h(App),router
});
注意：如过VueRouter对象的名字不是router，则不能简写为上述代码，应为 router:对象名
基本步骤就已经完成，然后配置路由规则，实际为配置映射关系，即哪个路径映射哪个组件。
在你创建的VueRouter实例对象里添加路径映射。例如下列代码。
path是要映射的路径，而component是访问路径时要映射的组件，这种映射关系可以有多个。
const router = new VueRouter({
routes:[
{path:'/text',component:CenterText},
{path:'/picture',component:TopCenter}
]
});需要注意的是单词不要拼错！！！
接下来就该配置导航，下面列举两个例子，a标签的href属性内填的路径应该和配置路由的路径相同。
<a class="nav-link active" aria-current="page" href="#/text">数据分析</a> <a class="nav-link" href="#/picture">轮播图</a>用<router-link to="映射路径"></router-link>也行，这样就不需要#号了。
<router-link to=""></router-link>然后配置路由出口，使用内置的<router-view></router-view>来配置路由出口，实际上就是映射组件后，组件显示的位置。
<router-view></router-view>另外还有路由重定向的知识点， 根据名字就知道他是用来改变映射路径，我这里用来设置首页显示。
const router = new VueRouter({
routes:[
{path:'/text',component:CenterText},
{path:'/',redirect:'/text'},
{ path:'/picture',component:TopCenter}
]
});下面是路由的功能展示，随便弄得一个，只做演示，点击不同的a链接，映射不同的组件。
