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链接，映射不同的组件。