Vue-router的安装与基础配置

我们知道Vue是一套构建单页面应用程序的渐进式框架，单页面应用就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

路由Vue-router简介

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接a标签来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和组件之间的映射关系。至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目npm run build 打包后，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签跳转页面是不起作用的，你必须使用vue-router来进行管理。

路由Vue-router安装

我们在搭建脚手架vue-cli或@vue-cli时，就可以选择配置时顺带安装一下路由，我们来回顾一下搭建@vue/cli流程，打开终端：
node安装，终端里输入命令node -v检查node是否安装成功。
输入命令npm install -g @vue/cli搭建脚手架，然后可以命令vue -V 或者 vue --version检查vue版本
输入命令vue create project创建项目，这里project是项目名称，可以随便取名。
选择手动配置模板，选Manually这个，看下图:

选择Router,Space空格键是切换选中与取消,括号里有*代表选中.建议在搭建脚手架时选中Router

好，假如我们忘了选中路由，也就是上图所示这样，在搭好脚手架后依然可以用命令安装路由，安装方法是打开终端，命令输入npm install vue-router --save-dev
安装好了之后，我们在package.json里能看到它及安装的版本。

路由的简单配置

在src文件夹下新增一个router文件夹，里面添加一个index.js文件

在index.js里配置:

在main.js文件中引入路由

配置好了路由之后就可以在vue文件里使用路由了