vue项目没有router文件夹_vue项目——Vue Router路由的使用

前言：

学习vue也有一段时间了，这里把学习整个vue项目中的一些知识点和问题，整理下方便自己记录，也希望给大家带来方便。我会连续写几篇系统的文章，讲解一个完整的vue项目中用到的各个使用模块。今天先来学习路由的的使用。

一、Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。我简单理解就是我们在有的页面中看到我们点击一个链接他并不是整个页面全部渲染，而是局部页面的一个重新渲染(比如：有的页面跳转的时候可以看到他的title每个页面都是固定的，并不会改变，这一部分是没有重新渲染的)，而且上面的链接也会发生相应的变化，整个就是使用路由的结果，可以大大减少我们的资源请求和页面的渲染。这就是路由的作用了，路由一般跟vue 的组件配合使用，大家可以理解为就是a链接的跳转，我们只是指定跳转到我们想要的另一个页面上。

二、安装Vue Router

如果你的项目是用vue-cli搭建的话(至于vue-cli脚手架工具如何安装和搭建，大家可以看我前一篇文章)，在建立项目的时候回让你选择是否安装Vue Router，如果你安装了，就不需要在安装了，如果你的项目是直接搭建的话，那么就需要安装了，直接在项目根目录中输入

npm install vue-router

如果你安装了cnpm的话，直接输入

cnpm install vue-router

这里推荐使用cnpm，速度会快很多。

运行完成后我们就安装完成了，因为我是用vue-cli搭建的项目，所有这里就以vue-cli环境为