vue-router——路由配置

一.什么是vue-router

vue-router路由插件，这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

二.vue-router安装

安装vue-router

vue-router是一个插件包，所以我们还是需要用npm或cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

解读router/index.js文件

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。

import Vue from 'vue'   //引入Vue

import Router from 'vue-router'  //引入vue-router

import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({

  routes: [              //配置路由，这里是个数组

    {                    //每一个链接都是一个对象

      path: '/',         //链接路径

      name: 'Hello',     //路由名称，

      component: Hello   //对应的组件模板

    }

  ]

})

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。

三.vue-router路由配置（一级路由）

1.新建details.vue/sort.vue/mine.vue文件，具体写法如下

2.App.vue文件

3.index.js文件（路由配置文件）

效果如图：

四.vue-router路由配置（二级路由）

1.新建login.vue/register.vue两个文件

2.在首页的组件下编写router-link路径

3.配置路由，二级路由用children属性实现，注意：二级路由路径不用写"/","/"表示找子路径，这里直接写组件名称即可。

五.单页面多路由区域操作

“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。也就是不同的router-view对应不同的组件。便于样式设置。如图：我想在Helloworld文件下，让<router-view name="left"></router-view>对应登录组件，让<router-view name="right"></router-view>对应注册组件。

在index.js文件下配置路由文件