12、vue-router的使用

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

第一步：安装 vue-router

---

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

第二步：准备组件

---

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

  
  

    HTML
    CSS
    JavaScript
  
            
  
  

现在我们修改为 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 指向的目标地址。
代码修改如下：

  
  
  

    HTML
    CSS
    JavaScript
  
            
  
  

    
    
  

我们用 router-link 来替换原来的 a 标签，原来的

里面增加了 router-view 组件。

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

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

• HTML
• CSS
• JavaScript

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

const htmlComponent = {
  template:`
HTML
`
}
const cssComponent = {
  template:`
CSS
`
}
const jsComponent = {
  template:`
JavaScript
`
}

语法很简单，用 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