大家好今天咱们就来讲讲Vue Router这个炫酷的玩意儿，还会告诉大家History模式下如何做到不用刷新页面也能换路由哦～是不是觉得很神奇？那就让我慢慢给你们揭开这层神秘的面纱！

听说过Vue.js吗？得赶快了解下。这个东西很强大，可以让咱们用JavaScript搞定网页跟APP。尤其是那个Vue-Router的小插件，太好用了，一下子就能解决单页面应用的路由问题。特别温馨提示，它还有两种模式，有个hash模式跟历史模式。今天，咱们就来谈谈这个历史模式。

哈喽！是想了解如何用这个“history”模式么？别慌，超简单的！先把那个讨厌的符号删掉，接着借力浏览器里的“History API”工具，分分钟让你的网页大变样，真心像一个真正的网址！有没有觉得超级好玩？快点行动！

首先咱得弄明白什么叫“历史模式”。说白了，就是你在启动VueRouter的时候添个参数mode=’history’就行，很简单对不对？

//引入Vue和Vue-Router
import Vue from 'vue'
import Router from 'vue-router'
//在Vue中使用Vue-Router插件
Vue.use(Router)
//定义路由
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
//创建Vue实例，并将router实例添加到Vue实例中
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

快试试history模式，这个功能可是能让服务器应对各种不同类型的URL请求哟。为啥？其实我们上网的时候，就是在不断地向服务器发出请求！于是服务器就需要做出回应咯，比如发送一个index.html页面啥的。不过别担心，很多服务器工具，像Apache和Nginx这样的，通过设置配置文件就能解决~

看呐，我们现在已经能玩转历史模式和设置服务器了！有人可能疑惑：“网页换新，是不是得刷新整块屏幕呀？”完全没必要担心这个问题！Vue-Router可是会自动记下浏览痕迹哒！不管点啥链接，组件都会立刻变脸儿，根本不用刷新整个页面！就好像偷摸地上网似的，感觉特酷！

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

和你说哈这个事情。咱网站上现在有两个页面，一个叫Home（主页），还有一个就是About（关于咱们）。比如说，在Home这儿放个“了解更多”的小按钮，你点它一下，马上就能跳到About上去啦；反之亦然，在About那头也得放个“回到首页”的按钮，只要你轻轻点击一下，立马就能蹦回Home咯。关键是在这中间玩儿的时候，网页的所有东西都不用重新加载，就是这么爽快！

Vue-Router的router-link真的超好用，网页瞬间美美的，翻页刷新的感觉也很好。这个功能真的很给力！用history模式后，那些好看的URL就像是真的网址似的，看着都觉得高大上！但是咱们还得弄个服务器处理这些访问请求才行哟~

  

    
Welcome to Home Page!
    About
  

好，今儿就先说到这！想了解咋用Vue-Router history模式实现不刷页面就换页的窍门吗？搞不好你能用得上。有啥问题或者想法就在下面留言哈。别忘记给我点赞分享给朋友哈~明儿再贱了哟~

  

    
Welcome to About Page!
    Home