一: 一个简单的路由的实现详细步骤:
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.