第三方简化版 vue-router 的使用及处理 Hash 模式的问题-JavaScript中文网-JavaScript教程资源分享门户

vue-router 是 Vue.js 官方提供的路由工具，它可以轻松的实现单页应用( SPA )的路由管理，但是 vue-router 也存在一些问题，比如配置过于繁琐，对于初学者来说门槛较高，同时 vue-router 在处理 Hash 模式的路由时也存在一些小问题，今天我们介绍一下第三方简化版的 vue-router，并探讨一下如何更好的处理 Hash 模式的问题。

简化版 vue-router 的使用

vue-router-lite 是一个第三方简化版的 vue-router，它仅仅提供了最基本的路由功能，并且使用简单方便。

安装 vue-router-lite

在 Vue.js 项目中安装 vue-router-lite，你可以使用 npm 快速安装：

npm install --save vue-router-lite

在 Vue 中使用 vue-router-lite

在 Vue.js 项目中使用 vue-router-lite，首先需要在 main.js 文件中引入 vue-router-lite：

import Vue from 'vue'
import VueRouterLite from 'vue-router-lite'

Vue.use(VueRouterLite)

接下来就可以像使用 vue-router 一样去使用 vue-router-lite 了，定义路由的方式也和 vue-router 一样：

// www.javascriptcn.com code example
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouterLite({
  routes
})

在 Vue 组件中使用 vue-router-lite

vue-router-lite 最大的特点就是使用方便，你可以在 Vue 组件中轻松的使用它提供的 `Link` 和 `Route` 等组件：

// www.javascriptcn.com code example
<template>
  <div>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    'router-link': RouterLink,
    'router-view': RouterView
  }
}
</script>

如何更好的处理 Hash 模式的问题

在开发单页应用时，一般会使用 Hash 模式的路由，因为 Hash 模式的路由具有以下几个优点：

不需要服务器端支持，可以直接部署在静态服务器上。
只要页面不刷新，即使单页应用内切换路由，也不会发生页面的刷新，用户体验更好。
Hash 会自动被浏览器忽略，不会提交到服务器，保证了安全性。

但是 Hash 模式的路由也存在一些问题，比如在进行搜索引擎优化时无法被搜索引擎抓取，同时也会造成一些 HTML5 特性无法使用。为了更好的处理 Hash 模式的问题，我们可以使用另一种路由模式：history 模式。

使用 history 模式

Vue.js 官方提供的 vue-router 已经内置了 history 模式，我们只需要在代码中进行简单的配置就可以使用 history 模式了：

const router = new VueRouter({
  mode: 'history',
  routes
})

细节问题

使用 history 模式时也需要注意一些细节问题，以下是一些常见的问题：

在使用 history 模式时，刷新页面会出现 404 错误，因为路由跳转的时候浏览器会发送一个请求去服务器上查找对应的页面，而 history 模式下的地址栏中并没有包含 `#` 符号，所以服务器会认为这是一个不在服务器上的地址，因而返回 404。解决方法是在服务器端增加一个路由处理，所有请求都返回到 index.html 文件，在 Vue.js 应用程序加载之后由 JavaScript 来处理路径。
直接访问一个路由链接时也会出现 404 错误，解决方法和第一种问题一样，增加一个路由处理即可。

小结

Vue.js 的 vue-router 是一个非常强大的路由工具，但是其配置过于繁琐，对于初学者来说有一定的难度；同时在处理 Hash 模式的路由时也存在一些问题，为了更好的处理这些问题，我们可以使用第三方简化版的 vue-router：vue-router-lite，并且可以使用 history 模式来避免 Hash 模式下的问题。Vue.js 学习者可以根据自己的需要选择合适的工具。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67b95ff6306f20b3a67b2e5f

第三方简化版 vue-router 的使用及处理 Hash 模式的问题