vue-router

本文最后更新于：2 年前

简介： 由于 Vue 在开发时对路由支持的不足，后来官方补充了 vue-router 插件，它在 Vue 的生态环境中非常重要，在实际开发中只要编写一个页面就会操作 vue-router。要学习 vue-router 就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是 SPA（单页应用）的路径管理器。再通俗的说，vue-router 就是我们 WebApp 的链接路径管理系统。
为什么我们不能像原来一样直接用标签编写链接哪？因为我们用 Vue 作的都是单页应用，就相当于只有一个主的 index.html 页面，所以你写的标签是不起作用的，你必须使用 vue-router 来进行管理。

Vue-router 入门

在安装路由之前需要 vue-cli 初始化，这里是我的 vue-cli 初始化地址https://github.com/13982720426/vue-cli

安装 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
16
17
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 的时候出现一个新的页面
​

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

  • 在 src/components 目录下，新建 Hi.vue 文件。
  • 编写文件内容，和我们之前讲过的一样，文件要包括三个部分