Vue路由详细讲解指南

Vue路由详细讲解

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

首先我们来学习三个单词（route，routes，router）：

route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；

routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；

router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

首先需要安装vue-cli来构建一个vue的开发环境（怎么安装这里不讲，自己百度去，如果这种问题自己都解决不了的话，后面的知识可能对你来说收益不大）

安装完vue-cli之后，我们的项目目录结构如下：

> build
> config
> node_ modules
>srC
> static
> test
6.babelrc
.editorconfig
.eslintignore
.eslintrc.js
◆.gitignore
JS.postcssrcjs
<> index.html
{}package-lockjson
{} package.json
➊README.md

然后我们在命令行中输入npm install vue-router -g来安装vue-router，安装完之后我们可以打开package.json文件，在package.json文件中可以看到vue-router的版本号；

”dependencies": {
“vue”: “A2.5.2”,
“vue -router”:“A3 .0.1”
},

到这一步我们的准备工作就完成了，要进行写demo了；

@ cc