vue-router 快速入门

概述

vue-router是vue.js官方的路由插件，vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。在传统的页面应用中，是用一些超链接来实现页面的切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

实现原理

SPA(single page application):单一页面应用程序，只有一个完整的页面，它在加载页面时，不会加载整个页面，而是只更新指定的容器中的内容。单页面应用的核心之一：更新视图而不重新请求页面。vue-router提供了两种模式：Hash模式和History模式。默认为Hash模式。

hash模式与History模式的区别

1，hash带有#，比较多人会觉得这样子比较丑。hash是通过后面的hash值来决定页面的展示
2，点击前进后退都不会向server端发送请求。但是刷新或者手敲路由回车。都是会向server端发请求的。
两种模式的区别在于：
（1）hash模式下仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com/#/foo，仅http://www.abc.com包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误；
（2）而history模式，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/foo。如果后端缺少对 /foo 的路由处理，将返回 404 错误。
emmmmm....So，要玩好好看的history模式。需要后台配置支持……所以呢，服务端需要增加一个覆盖所有情况的候选资源：如果URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面
下面两张图是两种模式下，刷新页面向后端发的HTTP请求

hash模式

hash模式

history模式

history模式

大概了解了两种模式。接下来，来简单的介绍一下vue-router的使用

1，下载vue-router npm install vue-router
2，在main.js中引入 import Router from 'vue-router'
3，安装插件 Vue.use(Router)
4，创建映射路由

嵌套路由
5，创建和挂载跟实例
挂载
6，在入口添加 <router-link>标签
7，在需要更新的容器内添加 <router-view>标签

具体实现可见如下代码

// 在router 的index.js 文件中（后面将该文件引入到main.js文件中）
import Vue from 'vue'
// 引入vuerouter
import Router from 'vue-router'
// 引入几个简单组件
import HelloWorld from '@/components/HelloWorld'
import H1 from '@/components/H1'
import H2 from '@/components/H2'
import ErrorPage from '@/components/Error'

// 安装插件
Vue.use(Router)

// 创建路由对象并配置路由规则（嵌套路由）
const router = new Router({
  routes: [
    {
      path: '/',
      component: HelloWorld,
      children: [
        {
          path: '/page1',
          name: 'H1',
          component: H1
        },
        {
          path: '/page2',
          name: 'H2',
          component: H2
        }
      ]
    },
    {
      path: '*',
      component: ErrorPage
    }
  ]
})
export default router

// main.js 文件中引入router
import router from './router'

new Vue({
  el: '#app',
// 让vue知道我们的路由规则
  router,  //  (缩写) 相当于 router: router
  components: { App },
  template: '<App/>'
})

在app.vue文件中引入<router-view>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

在上面路由配置中可以看到我们这是一个嵌套的路由，所以在HelloWorld.vue文件中也需加一个<router-view>，让它知道更新什么地方的内容

实现效果

HelloWorld页面
点击page1或page2
路由变更
上面是hash模式的，如果要想改成history模式，只需在配置路由规则时添加mode:histiry，当然还需要后端配置支持。