路由的精讲

一： 一个简单的路由的实现详细步骤：

step1：大致结构

需要在命令行 npm i vue-router 安装路由

step2：在main.js中 

step3：在index.js中创建一个路由器

 step4：在App.vue中

 step5:子组件中：

最终效果图：

1>初始图：

 2>点击跳转后：

**************************************************************************************************************

二：几个注意点

step1：大致结构

 step2：在router.js中写详细

 step3：

step4：效果图：

 step5：测试当路由组件被挂载时，其他路由组件在干什么呢？？[答案是：销毁了]

step6：观察路由组件school的this里面有什么也就是VueComponent里面有什么呢？[答案是：有$route和$router]

1>$route是路由信息对象 ，包括fullpath，params，query等路由信息参数。

 2>$router是路由实例对象包括路由跳转方法，钩子函数等。

************************************************************************************************************

三：嵌套路由

step1：大致结构：

step2：在router文件夹下的index.js写代码：

step3：在其父路由组件上

 step4：展示效果图：

 step5：总结的话语。

 *********************************************************************************************************

四：路由的query参数

step1：当前第一阶段的大致结构：

step2：

 【之前博客的补充与此处的内容些许不同！！！】

step3：新增detail路由组件

 step4：

 step5：

step6：展示效果图：

step7：总结

 ************************************************************************************************************

五：路由的params参数

step1：分析一下query参数和params参数的区别：

step2：去实现用params参数来传递参数

1>在index.js中：

 2>在schooltool路由组件中：[字符串写法的params]

 3>在detail路由组件中：

 step4：展示效果

 step5：[使用对象写法的params]

在schooltool路由组件中：

 step6：总结：

**********************************************************************************************************

六：路由的props配置。

1>props 布尔值写法，仅限于params参数传递参数的写法

step1：在router文件夹下的index.js中：

step2：

step3：展示效果图：

 2>props 函数的写法

step1:在route文件夹下的index.js下编写代码：

 step2：

step3：展示效果图：

 3>props的对象写法：

step1：在router文件夹下的index.js中：

 step2：展示效果图：

**************************************************************************************************************

七：route-link的replace属性：

1>push模式      默认的router-link就是push模式

step1:[使用之前的例图来展示]

step2：测试看看结果

 

2>replace模式

step1:使用之前的例图展示

 step2：修改一下App.vue中跳转时候的模式，改为replace模式：

step3：测试结果

总结：

八：编程式路由导航

step1：举例说明，为什么用编程式路由而不使用声明式路由，router-link不满足跳转的标签是button，而不能满足三秒后跳转。

 step2：为按钮绑定一个方法看看这个路由实例对象身上有什么？

 

step3：把step2里面的button的位置换一下，之前写的位置不对。

 step4：展示效果图：

 step5：同理我们按之前的步骤写一下this.$router.replace({ })

step6:展示效果图：

step7:观察一下this.$router身上还有什么呢？[back(),forward()方法]

step8：在App.vue中编写代码：

 总结：

*********************************************************************************************************

九：缓存路由组件 

step1：修改一下SchoolMan的代码。

 step2：在School组件中，（其是SchoolMan的父组件）

 step3：[但是仅仅限于schooltool和schoolman的切换中]

总结：

****************************************************************************************************

 十：两个新的生命周期钩子（仅在路由中使用）

 **********************************************************************************************************

十一：_全局前置_路由守卫 [beforeEach()]

step1：在index.js中编写代码

 

 step2：看看效果：

 

step3：修改一下index.js里面的代码，在全局前置路由守卫中加入next()放行。

 

step4：验证是否可以拦截  我只想要你登录成功才能访问学校人员和教学设施导航 ，否则不允许你访问，但是student和school可以游客访问。

step5：如果你觉得to.path == 'xxx'  写的很麻烦的话，可以利用路由元信息参数meta 

 1>

2>

 

 3>效果是一样的。

 **********************************************************************************************************

十二：全局后置路由守卫 [router.afterEach()]

step1：在每个路由里面加上路由元信息，title

 step2：点击不同的路由时，标题会发生变化。

 step3：

总结：

 

 **************************************************************************************************************

十三：独享路由守卫 [beforeEach]

独享路由守卫：某一个路由单独享受的路由守卫

提出问题：我只想对一个路由做出限制，schooltool，其他的想怎么变怎么变。

step1：把之前的全局路由守卫移除掉，换为路由独享守卫，只针对与schooltool。

step2：总结：

 

 ************************************************************************************************************

十四：组件内路由守卫

step1：举例说明：

 step2：

 总结：

 ****************************************************************************************************

十五：hash模式和history模式

 history  执行打包命令有问题 npm run build.