vue-router的学习笔记--1

简介：

    由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器(学习本篇之前我还真这么以为的哈)，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统，简单的可以理解为控制页面的跳转按键。

    开始我也会这样疑虑，为什么我们不能像原来一样直接用<a></a>标签编写链接哪？但回顾前面所学的Vue的应用结构，发现我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。

第1节：Vue-router入门

安装vue-router

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

1	npm install vue - router -- save - dev

如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

解读router/index.js文件

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import Vue from 'vue'    //引入Vue import Router from 'vue-router'    //引入vue-router import Hello from '@/components/Hello'    //引入根目录下的Hello.vue组件   Vue . use ( Router )    //Vue全局使用Router   export default new Router ( {    routes : [                //配置路由，这里是个数组      {                      //每一个链接都是一个对象        path : '/' ,          //链接路径        name : 'Hello' ,      //路由名称，        component : Hello    //对应的组件模板      }    ] } )

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。

增加一个Hi的路由和页面

对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入  http://localhost:8080/#/hi   的时候出现一个新的页面。

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import Vue from'vue'   //引入Vue import Router from'vue-router'  //引入vue-router import Hello from'@/components/Hello'  //引入根目录下的Hello.vue组件   Vue.use(Router)  //Vue全局使用Router   exportdefaultnewRouter({   routes:[              //配置路由，这里是个数组     {                    //每一个链接都是一个对象       path:'/',         //链接路径       name:'Hello',     //路由名称，       component:Hello   //对应的组件模板     }   ] })

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。

增加一个Hi的路由和页面

对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入  http://localhost:8080/#/hi  的时候出现一个新的页面，先来看一下我们希望得到的效果。

看到了效果，我们看一下具体的操作步骤：

• 在src/components目录下，新建 Hi.vue 文件。
• 编写文件内容，和我们之前讲过的一样，文件要包括三个部分<template><script>和<style>。文件很简单，只是打印一句话。
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  <template>    <div class = "hello" >      <h1> {{ msg }} </h1>    </div> </template>   <script> export default {    name : 'hi' ,    data ( ) {      return {        msg : 'Hi, I am Miss.F'      }    } } </script>     <style scoped>   </style>

• 引入 Hi组件：我们在router/index.js文件的上边引入Hi组件
  
  1	import Hi from '@/components/Hi'

• 增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。
  
  1 2 3 4 5

  {    path : '/hi' ,    name : 'Hi' ,    component : Hi }

通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import Vue from 'vue'    //引入Vue import Router from 'vue-router'    //引入vue-router import Hello from '@/components/Hello'    //引入根目录下的Hello.vue组件 import Hi from '@/components/Hi'   Vue . use ( Router )    //Vue全局使用Router   export default new Router ( {    routes : [                //配置路由，这里是个数组      {                      //每一个链接都是一个对象        path : '/' ,          //链接路径        name : 'Hello' ,      //路由名称，        component : Hello    //对应的组件模板      } , {        path : '/hi' ,        name : 'Hi' ,        component : Hi      }    ] } )

router-link制作导航

现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，我们先来看一下它的语法。

1	< router - link to = "/" > [显示字段 ] < / router - link >

• to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成  to=”/”  ，
• [显示字段] ：就是我们要显示给用户的导航名称，比如首页  新闻页。

明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航。

1 2 3 4

< p >导航 ：    < router - link to = "/" >首页 < / router - link >    < router - link to = "/hi" > Hi页面 < / router - link > < / p >

现在我们访问页面：

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，发现已经多出了导航。

总结：这节我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用<router-link>标签设置导航。路由是Vue中最重点的内容，是必须完全掌握学会的。加油吧！下一节再见。