深入理解Vue-router

Vue-router是Vue.js官方的路由管理插件，可以实现单页面的应用效果，同时Vue-router支持两种模式：hash模式和history模式。下面我们从多个方面详细阐述Vue-router的这两种模式。

一、hash模式

hash模式是Vue-router的默认模式，使用URL中的hash(#)来模拟URL的变化，不会导致页面的刷新，从而实现页面的动态切换。

1、初始化

在启动Vue.js应用时，需要先安装Vuex和Vue-router插件，在main.js中初始化Vue-router并挂载到Vue实例上。

    
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ]
})

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

2、配置路由

在Vue-router中，通过定义路由映射关系来实现URL地址到组件的映射关系。Vue-router的路由映射关系通过routes配置项来实现。在routes中可以定义多个具体的路由信息。每个路由信息是包含了URL地址和组件模板信息的对象，其中URL地址通过path属性定义，组件模板信息通过component属性定义。

    
const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ]
})
    

3、路由跳转

在Vue-router中，通过编程式导航或声明式导航来实现路由的跳转。

编程式导航：通过this.$router.push()方法实现路由的跳转。

    

   

<script>
export default {
  methods: {
    goAbout() {
      this.$router.push('/about');
    },
  },
};
</script>
    

声明式导航：通过router-link组件实现路由的跳转。

二、history模式

history模式是Vue-router提供的另外一种模式，使用HTML5的History API来改变浏览器的URL地址，不带#号，使用history.pushState()或history.replaceState()方法，实现页面的动态切换。

1、初始化

启用history模式需要在Vue的router初始化时进行配置。在实例VueRouter时，通过传递mode参数，将mode的值赋为'history'。

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

2、配置路由

在history模式下，路由的配置和hash模式下的配置方式相同。

3、服务器配置

使用history模式跳转路由时，如果服务器根据URL地址找不到相应的资源文件，会返回404错误。为了解决这个问题，需要配置服务器，使得所有的页面请求都返回index.html文件，在index.html文件中通过Vue-router的规则跳转至相应页面。下面给出一个apache服务器配置的实例。

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

三、总结

通过本文的介绍，我们详细了解了Vue-router的两种模式。hash模式使用 URL 中的 hash# 来模拟URL的变化，不会导致页面的刷新，从而实现页面的动态切换；history模式使用HTML5的History API来改变浏览器的URL地址，使用history.pushState()或history.replaceState()方法，实现页面的动态切换。