vue-router history模式具体如何实现

Vue-router提供了两种路由模式：hash模式和history模式。

hash模式是通过URL中的#号来实现的，可以在URL中添加hash值来实现路由切换，不会刷新页面。hash模式的优点是兼容性好，不需要服务器端的支持，缺点是URL中会出现#号，不够美观。

history模式是通过HTML5的history API来实现的，可以实现真实的URL，不会出现#号，但是需要服务器端的支持。history模式的优点是URL美观，缺点是兼容性不好，需要服务器端的支持。

要使用history模式，需要先确保服务器端已经做好了相关的配置，将所有的路由都指向index.html，然后在Vue-router中进行相关的配置。

具体实现步骤如下：

1. 在Vue项目中安装Vue-router：npm install vue-router --save

2. 在router/index.js中进行相关的配置，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history', // 路由模式，使用history模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

3. 在main.js中引入router，并挂载到Vue实例中，如下：

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

Vue.config.productionTip = false

new Vue({
  router, // 将router挂载到Vue实例中
  render: h => h(App),
}).$mount('#app')

4. 在App.vue中使用router-link和router-view进行路由跳转和组件渲染，如下：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

这样就可以使用history模式进行路由跳转了。