Vue基础三——Vue-router（vue router用法）

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

有的小伙伴会有疑虑，为什么我们不能像原来一样直接用<a></a>标签编写链接呢？因为我们用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。

1.1、Vue-router入门

1.1.1、安装vue-router

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

npm install vue-router --save-dev

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

1.1.2、解读router/index.js文件

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

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import HelloWorld from '@/components/HelloWorld'  //引入根目录下的HelloWorld.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [                   //配置路由，这里是个数组
    {                         //每一个链接都是一个对象
      path: '/',              //链接路径
      name: 'HelloWorld',     //路由名称，
      component: HelloWorld   //对应的组件模板
    }
  ]
})

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

1.1.3、增加一个Hi的路由和页面

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

在src/components目录下，新建 Hi.vue 文件。

编写文件内容，和我们之前讲过的一样，文件要包括三个部分<template><script>和<style>。文件很简单，只是打印了一句话。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am 进击的辣条'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

引入 Hi组件：我们在router/index.js文件的上边引入Hi组件

import Hi from '@/components/Hi'

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

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

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

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'

Vue.use(Router) //Vue全局使用Router

export default new Router({
  routes: [ //配置路由，这里是个数组
    { //每一个链接都是一个对象
      path: '/', //链接路径
      name: 'HelloWorld', //路由名称，
      component: HelloWorld //对应的组件模板
    },
    {
      path: '/hi',
      name: 'Hi',
      component: Hi
    }
  ]
})

1.1.4、router-link制作导航

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

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

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

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

<div>
  <router-link to="/">首页</router-link>|
  <router-link to="/hi">Hi页面</router-link>
</div>

现在我们进入访问页面，发现已经多出了导航。

总结：这节课我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用<router-link>标签设置导航。