一、vue-router

1.安装
npm install vue-router -D
2.使用
vue-router 是一个插件，需要在 Vue 的全局引用中通过 Vue.use()将它引用到 Vue 实例当中。在我们的工程中。main.js是程序入口文件，所有的全局性配置都会放在这里面。
3.路由配置
页面就是组件，那么一个路由定义就该与一个组件相对应。第一个页面应该是“首页”，也就是默认路由。
4.配置一个简单的路由
准备两个页面，格式相同即可：

    <!--/Home.vue-->
    <template>
        <div>Home</div>
    </template>
    <style></style>
    <script>
        export default {}
    </script>

在 main.js 中

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

在 router.js 中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Explorer from '@/components/Explorer'
import Cart from '@/components/Cart'
import Me from '@/components/Me'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }, {
      path: '/explorer',
      name: 'explorer',
      component: Explorer
    }
  ]
})

以后凡是遇到配置文件，就可以单独配置，在 main.js 中仅引用配置到全局变量。

二、路由的模式

1.URL

• history 地址模式：http://localhost/home
• 非 history 地址模式：http://localhost/#home
  2.三种模式详解
• Hash：使用 URL hash 值来作为路由。支持所有浏览器，包括不支持 HTML5 History API 的浏览器。
• History：依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
• Abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器 API，路由会自动强制进入这个模式。
  模式配置方式：

export default new VueRouter({
    mode: 'history',
    routes: [
        {
          path: '/home',
          name: 'home',
          component: Home
        }, {
          path: '/explorer',
          name: 'explorer',
          component: Explorer
        }
      ]
    })

三、路由与导航

1.vue-router 提供的两个指令标签

• <router-view>——渲染路径匹配到的视图组件，它还可以内嵌自己的<router-view>，根据嵌套路径渲染嵌套组件。
• <router-link>——支持用户在具有路由功能的应用中（点击）导航。

    <template>
      <div id="app">
        <div class="tabs">
          <ul>
            <li>
              <router-link :to="{ name : 'home' }">
                Home
              </router-link>
            </li>
            <li>
              <router-link :to="{ name : 'explorer' }">
                Explorer
              </router-link>
            </li>
          </ul>
        </div>
    
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </template>

使用<router-link :to="{ name : 'explorer' }">的形式而不用<router-link :to="/explorer">，给每一个路由取一个名字，避免更改路由时需要再改导航的路径。
2.指定输出元素
不指定输出元素时，代码最终的输出结果会是：

<ul>
    <li>
       <a href="#>
          <div>Home</div>
       </a>
     </li>
      <li>...</li>
</ul>

其实我们并不需要<a>标签，可以通过属性指定我们可以直接输出到<li>标签上节省出更多的代码。<router-link :to="{ name : 'home' }" tag="li">

3.动态路由

routes:[{
    name: 'BookDetails',
    path: '/book/:id',
    component: BookDetails
}]

在参数名之前加上“:”，然后将参数写在路由的 path 内。
在<router-link>中我们可以加入一个 params 的属性来指定具体的参数值：

<router-link :to="{name: 'BookDetials', params: { id : 1 }" >
</router-link>

参数值的读取方式：

export default {
    created () {
        const bookID = this.$router.params.id
    }
}

使用路由参数时，例如从/books/1导航到/books/2，原来的组件实例会被复用，比起销毁再创建复用则显得更加高效，不过，这也意味着组件的生命周期钩子不会被重复调用，也就是说created、mounted 等钩子函数在页面第二次加载时会失效。那么，当组件复用时，想对路由参数的变化做响应的话，就需要在 watch 对象呗添加$route 对象变化的跟踪函数:

export default {
    template: '...',
    watch: {
        '$route' (to, from) {
            // 对路由变化作出响应
        }
    }
}

4.前套路由
在 route.js 的配置中，要显示子视图与子路由的对应。利用 children 数组属性就可以定义子路由了。

routes:[{
    name: 'Main',
    path: '/',
    component: Main,
    children: [
        {name: 'Home', path: 'home', component: Home,}
    ]
}]

子路由中的路径就不需要加上"/"了，生成时主路由的 path 会被自动添加到自路由前。另外，以"/"开头会被当做根路径，就不要加"/"了。

5.切页动画
Vue 提供了 transition 的封装组件。
有4个（CSS）类名在 enter/leave 的过度中切换：

• CSS 类名-enter
• CSS 类名-enter-active
• CSS 类名-leave
• CSS 类名-leave-active

四、导航状态样式

当用户点击 Tabs 上的任意一个标签组件时，组件应该进入一个“激活”状态。在默认情况下<router-link>对应的路由匹配成功，就会自动设置 class 属性值为.router-link-active，如果我们想设置“激活”状态样式类名为 active，可以通过 active-clas 属性进行设置。

<router-link :to=" { name: 'Home' } "
                    active-class="active" >
</router-link>

但如果要在页面上这样显示声明，每一个都写一个，这样就不 DRY 了。所以，可以在 router.js 中配置一下语句：

const router = new VueRouter ({
    // ...省略
    linkActiveClass: "active"
})

样式激活是依据对 URL 的全包含匹配，也就意味这"/"跳转到别的路由依旧会保持“激活”状态。在这种情况下就需要使用精确匹配模式，使用 exact 属性。

<router-link :to=" { name: 'Home' } " exact>
</router-link>

五、History 的控制

当我们在使用 HTML5的 History 模式的时候，每次路由的改变都会被“推”（push）到导航历史中保留，在某些情况下我们并不需要浏览器这样做，而是希望他能将原有的记录进行替换。
首先，需要了解<router-link> 用两种属性来调用 Vue 实例内$router 对象的三个方法：

设置 replace 就会调用 router.replace() 而不是 router.push()，于是导航后就不会留下 History 记录。

<router-link :to=" { name: 'Home' } " replace>
</router-link>

设置 append 属性后，则在当前（相对）路径前添加基本路径。例如，从 /a 导航到相对路径 b，如果没有配置 append，则路径为 /b，如果配置了，则为 /a/b。

六、关于 Fallback

当使用 History 模式的时候，点击<router-link>会自动调到相应的路径，但是在浏览器直接输入" http://loacalhost/home"则会404，因为浏览器直接将这个地址发向服务器。
解决办法是将所有发到服务器端的请求利用服务器端的 URLRewrite 模板重新转发给/index.html。
常见：
Apache
在配置文件中加入 URLRewrite模块配置
Nginx
将404页面自动重定向到/index.html
Node.js(Express)
安装 Fallback 插件
注意
一旦配置，服务器将不再返回404错误页面，为避免这种情况，应该在 Vue 应用里覆盖所有的路由情况，然后在给出一个404页面。

const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '*', component: NotFoundComponent}
    ]
})