Vue2学习之路由与路由导航

关于main.js中的一个小点

在我们的main.js中，有这么一行代码，我们之前没讲它是干嘛用的：

这一行代码设置为true（默认也是true）的话，则会在Vue运行时，终端会呈现一个提示：

它会提醒你如果要上线产品的话一定要打开生产模式。说白了就是没啥用处，不过就是解释一下这是干嘛用的。嘿嘿。

ESLint

这个插件就是用来约束我们日常编写JavaScript代码风格用的，不是特别重要，进了公司可能会用的比较多，如果你是一个前端开发者的话。

axios再深入

首先切记，在Vue项目中使用axios，要先安装axios才行，具体就是一句命令的事情。大家可以自行百度。
然后现在我们要在组件中使用axios，我们会先想到下面这样写：

但这样会有一个问题就是，那我们每一个组件如果都有网络请求需要的话，岂不是都得把上面的这个引入代码都写一遍？这样很麻烦，怎么解决？
其实我们已经知道Vue项目作为一个单页面应用在main.js中有一个Vue实例对象，我们只要把axios挂载到这个Vue实例对象的原型对象上，就可以使全局组件都能够分享这一个共同的axios了：

那么我们在组件里直接调用就可以了：

但是我们在开发当中一般不会叫axios，我们都会叫$http：

这是我们为了模仿Vue的内置成员（因为Vue的内置成员都是以$开头）而设计的名字，但其实叫什么都行。

这样以后我们在每个.vue组件中要发起请求的话，直接调用this.$http.xxx即可。

然后还有一个问题，就是请求根路径过长，而且我们每回都得再写一遍的繁琐问题：

这个我们也可以解决，去main.js中先配置好根路径即可：

把上面的请求根路径可以改成我们现有的需要请求的接口地址即可：

所以以后再写url的时候就可以省略这一段了。

了解直接把axios挂载到Vue实例对象上的局限性

一句话，不利于API接口的复用。
所以这种方式我们一般不推荐，我们会单独讲axios封装成一个js文件来使用，但这里先不做解释，后面会说。

路由(router)

什么是路由？
就是对应关系。

SPA与前端路由

啥是前端路由

通俗易懂的概念：Hash 地址与组件之间的对应关系。
Hash地址就是对应的地址栏上面的#（也叫锚链接）。

前端路由工作关系

实现简易前端路由

但这种方式过于繁琐，所以Vue直接提供了一个Vue-router来帮我们解决路由问题。

Vue-router

Vue-router安装和配置步骤

1、项目中安装路由

2、创建路由模块

这个文件即使创建好了暂时也还和main.js没什么关系，没关系就表示它不起作用（因为main.js是入口文件），所以我们还需要在main.js中导入并挂载这个路由模块。

3、导入并挂载路由模块


4、声明路由链接和占位符

声明路由的匹配规则

Vue-router的常见用法

路由重定向

嵌套路由

声明子路由链接和子路由占位符

通过children属性声明子路由规则

动态路由分配

动态路由的概念

$router.params参数对象

使用props接收路由参数

声明式导航与编程式导航

vue-router中的编程式导航

$router.push

$router.replace

$router.go

$router.go的简化用法

导航守卫

全局前置守卫

守卫方法的3个形参

next函数的3种调用方式

控制后台主页的访问权限