12、vue-router的使用

vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建 SPA 单页面应用。vue 的单页面应用是基于路由和组件的，相当于传统页面是基于 <a> 标签链接和页面，路由用于设定访问路径，并将路径和组件映射起来，这样就可以实现通过由 router 来切换组件（视图）。

第一步：安装 vue-router

创建一个页面，安装引入 vue.js 和 vue-router.js。
这里用最简单的方式安装：把文件都下载到本地，直接引入。

<script src="js/vue2.0.js"></script>
<script src="js/vue-router.js"></script>

第二步：准备组件

这里我们实现一个简单的 tab 选项卡，点击 tab 就可以切换页面视图。
我们先用传统的 <a> 标签来编写，这里我们只展示 html 部分。

<div id="app">
  <!-- 左侧导航栏区域 -->
  <div class="nav">
    <a>HTML</a>
    <a>CSS</a>
    <a>JavaScript</a>
  </div>
            
  <!-- 右侧内容区域 -->
  <div class="content"></div>
</div>

现在我们修改为 vue-router 方式。这里就要介绍 vue-router 给我们提供的两个新组件：router-link 和 router-view，router-link 组件用于帮助用户进行视图导航，也就是我们传统的 a 标签，a 标签用 href 属性来指定导航的目标地址，而 router-link 组件则用 to 属性来指定目标地址。

注意：vue-router 1.0 的导航语法是给 a 标签添加 v-link 属性。我们这里只介绍 vue-router 2.0 的用法。

router-view 组件负责渲染匹配到的视图组件，也就是渲染 router-link 指向的目标地址。
代码修改如下：

<div id="app">
  <!-- 使用 router-link 组件来导航 -->
  <!-- 通过传入 'to' 属性指定导航链接 -->
  <div class="nav">
    <router-link to="/html">HTML</router-link>
    <router-link to="/css">CSS</router-link>
    <router-link to="/js">JavaScript</router-link>
  </div>
            
  <!-- 右侧内容区域 -->
  <div class="content">
    <!-- 匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</div>

我们用 router-link 来替换原来的 a 标签，原来的 <div class="content"></div> 里面增加了 router-view 组件。

接下来，我们来编写 JavaScript 部分的代码。

首先，我们的导航中有三个栏目：

HTML
CSS
JavaScript

它们会导航指向 3 个对应的视图组件，下面来定义 3 个组件。

const htmlComponent = {
  template:`<div>HTML</div>`
}
const cssComponent = {
  template:`<div>CSS</div>`
}
const jsComponent = {
  template:`<div>JavaScript</div>`
}

语法很简单，用 json 对象的形式定义，至于 template 属性对应的内容，就是将会被替换渲染到 router-view 组件的内容了。
接下来我们可以直接创建一个 router 实例，创建实例的时候我们需要传参数 routes 来进行配置，这样就可以实现定义它们之间的关联关系了。

// 创建 router 实例，并定义导航和组件的映射关系
const router = new VueRouter({
  // 配置 routes
  routes: [
    // 定义 3 个导航和组件的映射关系
    {
      path:"/html",
      component:htmlComponent,
    },
    {
      path:"/css",
      component:cssComponent,
    },
    {
      path:"/js",
      component:jsComponent,
    }
  ]
})

注意：routes 的值是个数组类型，数组中每个元素是对象类型。

最后是创建一个 vue 实例，创建的时候通过配置 router 参数来注入我们刚刚定义好的 router 路由。

let vm = new Vue({
  el: '#app',
  router
})

效果如下：

效果图.png

当点击 CSS 导航时，效果如下：

效果图.png