从vue-router看前端路由的两种实现

从vue-router看前端路由的两种实现

从vue-router看前端路由的两种实现

前端路由是现代前端开发中非常重要的一部分，它实现了单页应用(SPA)的核心功能，目前主流的前端框架如Angular、React、Vue等都实现了自己的路由组件。其中，Vue框架中自带的路由组件vue-router是应用广泛的一种。在vue-router的实现中，涉及到两种不同的前端路由实现方式。下面我们分别来讲解一下这两种实现方式。

1. Hash路由

Hash路由采用浏览器的锚点（#）模拟路由，因为锚点后的内容不会发送到服务器端，所以每次路由切换实际上只是修改了url中的hash值，在不刷新页面的情况下实现了内容的更新和路由的跳转。vue-router中通过mode属性来指定使用hash路径还是history路径，默认情况下是使用hash路径：

const router = new VueRouter({
  mode: 'hash', // 表示启用hash路由
  routes: [...]
})

Hash路由的实现方式简单，可以兼容到IE8，但是它存在一些问题：

• URL中会带有#号，不美观；
• 锚点后的内容不会发送到服务器，不能直接用来实现搜索引擎优化(SEO)；
• hash值变化只能通过onhashchange事件来监听，兼容性不好。

因此，随着前端技术的不断发展，hash路由的使用逐渐减少。

1. History路由

History路由采用HTML5中的History API实现。通过调用pushState或replaceState方法改变url，而不刷新页面实现路由，这样就可以使路由更加像传统的URL，美观并且可以被搜索引擎索引。vue-router中同样通过mode属性来指定使用history路径：

const router = new VueRouter({
  mode: 'history', // 表示启用history路由
  routes: [...]
})

History路由的实现方式通常需要服务器端的支持，在history模式下，浏览器向后端发送的请求都是真正的请求，因此需要保证后端在接收到这些请求时，始终返回的是同一个HTML页面。如果后端配置不正确，可能会导致路由跳转失败，因此需要特别注意。

例1：Hash路由的示例

基于vue-cli搭建一个vue项目，启用vue-router，并在路由配置中指定使用hash路由，实现一个简单的路由切换功能。

首先，在命令行中进入项目目录，输入以下命令安装vue-router：

npm install vue-router --save

然后在main.js文件中引入vue-router，创建路由实例，并在vue实例中注入路由实例，如下所示：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

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

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

其中，忽略了Home和About组件的定义代码，这里结合代码解释一下路由的定义部分，首先通过redirect属性指定根路由跳转到home路由，接着我们定义了两个路由，分别对应到/home和/about路径。注意到路由的定义中使用了component属性，这里只是对应了对应的vue组件，在实际使用中你需要定义它们。

最后，在App.vue组件中定义显示路由内容的代码，如下所示：

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

其中，router-link是vue-router提供的路由导航组件，可以实现路由跳转功能，to属性则指定了跳转到哪一个路由。router-view则用来显示当前路由对应的内容。

例2：History路由的示例

基于vue-cli搭建一个vue项目，启用vue-router，并在路由配置中指定使用history路由，实现一个简单的路由切换功能。

首先，在命令行中进入项目目录，输入以下命令安装vue-router：

npm install vue-router --save

然后在main.js文件中引入vue-router，创建路由实例，并在vue实例中注入路由实例，如下所示：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

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

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

与例1中的代码相同，只是在创建路由实例时将mode属性的值改为了history。

最后，在App.vue组件中定义显示路由内容的代码，如下所示：

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

与例1中的代码相同，只是将Hash路由在router-link中使用的锚点链接改为了普通的相对路径链接。

总结

从vue-router的实现中，我们可以看到，前端路由实现方式主要有两种，分别是Hash路由和History路由。Hash路由的实现简单，可以在不支持HTML5的浏览器中兼容，但是存在URL不美观、不利于SEO等问题；History路由的实现方式优雅，可以充分利用HTML5的优势，但需要考虑浏览器兼容性、服务器端配置等问题。我们应该根据应用需求而选择相应的前端路由实现方式。