1.简介

1.1 为什么要用Vue-router

我想做一个带导航栏的简单web页面，页面的内容可以随导航栏的点击切换。第一个想法是想用webpack打包出几个页面，然后在每个页面的按钮上添加链接，但是这样做每次页面都要刷新，效率上存在很大问题，并且用户点击之后导航栏也会跟着刷新，体验不好，于是发现Vue中的Vue-router很适合实现这种简单的多页面应用。

1.2 Vue-router的两种模式

vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式，默认采用Hash模式。

1.2.1 hash模式

hash模式通过 hash 来实现无刷新路由，url hash 就是类似于：http://www.xxx.com/#/login。“#” 后面就是 hash 值，这个url并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 事件，通过这个事件js就可以知道 hash 值发生了哪些变化。于是可以通过监听hashchange来实现更新页面部分内容的操作。

1.2.2 history模式

HTML5中多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了HTML5的实现，单页路由的url就不会多出一个#，更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，history模式下需要服务器把所有路由都重定向到根页面。

2.Vue-router的使用

2.1 安装

2.1.1 下载/CDN引入

下载地址：https://unpkg.com/vue-router/dist/vue-router.js
CDN引入地址：https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
然后在html页面引入：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2.1.2 npm安装

终端输入：

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)
})

我的是在src下专门创建一个router文件夹，在其中创建index.js，写入上面的内容，然后在main.js中通过引入./router下的组件来引入，这样方便管理

import App from './App'
import router from './router'/* eslint-disable no-new */
new Vue({el: '#app',router,render: h => h(App)
})
})

2.2 实现

2.2.1 路由配置

配置/router/index.js，引入了router和需要的各组件（每一页要展示的内容）后，定义route。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}

export default new Router({routes: [{path: '/homepage',component: homepage},{path: '/workpage',component: workpage},{path: '/otherpage',component: otherpage},// 重定向{path: '/',redirect: '/homepage'}]
})

这里我定义了三个route,每一个分别对应一个组件。

2.2.1 页面实现

在vue-router中, 它定义了两个标签和来对应点击和显示部分。就是定义页面中点击的部分，定义显示部分，就是点击后，区配的内容显示在什么地方。所以还有一个非常重要的属性 to，定义点击之后，要到哪里去，如：Home
在vue-cli中，我把routerview放在app的主组件上，用来规范展示的内容的区域：

<template><div id="app"><el-container><el-header><div><Nav></Nav></div></el-header></el-container><router-view></router-view>//展示区域在Nav下面</div>
</template>

如果要自己写Nav的话，只要将router-link标签包入按钮的div中就可以了，我这里采用的是Element框架中的Nav组件，本身带有router方法，在标签中把router打开，然后下面的按钮添加index属性，就可以完成路由功能，Nav组件内容如下：

<template><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="handleSelect"><el-menu-item index="homepage">首页</el-menu-item><el-menu-item index="workpage">工作</el-menu-item><el-menu-item index="otherpage">作品</el-menu-item></el-menu>
</template>