什么是路由

路由就是 URL 地址，地址不同，则显示的页面内容不同，路由分为前端路由和后端路由，Vue 属于前端框架，因此我们讲解的路由也是前端路由。

Vue 是单页面应用程序，通过 hash(#) 来实现不同页面之间的切换。

什么是单页面应用程序？通俗地讲就是不需要刷新页面，所有组件都在一个页面上的应用程序。

安装路由

路由的安装方式有两种：一种是 cdn 安装，另一种是 npm 安装。本节使用 cdn 形式安装路由，npm 安装形式在第 7 章讲解。

Vue Router 官网的 cdn 地址为 https://router.vuejs.org/zh/installation.html 。

使用路由

在页面中使用路由需要以下 5 个步骤。

  1. 引入路由。

  2. 创建路由实例对象。

  3. 为构造函数传递配置对象。

  4. 将路由挂载到 Vue 实例对象。

  5. 视图层显示组件内容，具体代码如下。

视图层代码如下。

<div id="app" v-cloak>
  <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 //1．引入路由
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

<script>
  var login = {
    template: '<h1>登录</h1>'
  }
 //2．创建路由实例对象
  var router = new VueRouter({
 //3．传递配置对象，创建匹配规则
 //routes 是路由匹配规则，其值是数组，每个匹配规则都是一个对象
    routes: [{
      path: '/login',
      component: login
    }]
  })

  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {},
    //4．将路由挂载到Vue实例对象
    router: router
  })
</script>

代码解析如下。

在路由使用中，重点讲解一下第三个步骤中的创建路由匹配规则，路由匹配规则的属性是 routes，其值是数组，后期每一个匹配规则就是一个对象。

path 是哈希后面的路径，component 是路径对应的组件，这个路由表示的是当访问 /login 时显示 login 组件。