Vue-router: 实现纯前端多页面应用（Vuecli+Element UI）

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>

最终我们在app.vue的主页面中点选Nav中的按钮，就可以顺利展示各个不同的组件了~
这是我的目录结构：

本项目代码上传至Github：
https://github.com/Px956678784/Little-Planet