Vue router路由详解

原创
小哥 3年前 (2022-10-26) 阅读数 10 #uni-app
文章标签 vueroutervue教程

1.router路由守卫,前置路由守卫,后置路由守卫,都享路由守卫,组件路由守卫,auth路由设置是否需要登录,路由工作模式history模式和hash模式的理解

听胡说八道:
在工艺路线跳跃之前执行 有三个返回参数 to, from, next

router.beforeEach((to, from, next) => {
   console.log(to,from)
   next() // 释放即可跳跃
})

2.全球后方路线守卫

听胡说八道:
在工艺路线跳跃之前执行,后置路由守卫没有next 只有to from

router.afterEach((to, from) => {
    console.log(to,from)
})

3.专属线路守卫

听胡说八道:
专属线路守卫只有前置没有后置!想用可以直接把全局的后置路由守卫打开即可!

写入路径


4.组件内路由守卫

听胡说八道:
在组件内部写入 触发通过路由规则进入组件,
自己理解:一个组件中的组件不会触发该方法,只有从另一个组件跳到该组件才会触发该方法;


5.auth 路由设置是否需要登录

听胡说八道:
需要在meta所有组件的变量可以随意定义;

1.在页面上定义字段表示需要登录;

2.监听前方路障中的该字段,进行相应的相关操作;


6.布线工作模式 - history模式 (推荐)和hash模式

听胡说八道:
‘#’是代表hash的意思;
拥有它意味着hash模式,也就是请求服务器不会放。hash后期与服务器进行数据交互;
没有它,它就意味着是的。history模式下,它将全部与服务器交互;

配置地址如下图所示;

注意:history和hash区别;
1.history兼容性稍差一些。hash,hash最好是兼容;
2.在打包的项目完成并部署之后,history模式页面刷新报告错误,hash则不会;
就想用history 有一些解决方案
后端人员需要安装兼容的history的插件


版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除