1.0 路由守卫-全局前置守卫
路由跳转之前, 会触发一个函数
语法:
router.beforeEach((to, from, next) => {})
- 在路由对象上使用固定方法beforeEach
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息) 目标
// 参数2: 从哪里跳转的路由 (路由对象信息) 来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地
// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
if (to.path === "/my" && isLogin === false) {
alert("请登录")
next(false) // 阻止路由跳转
} else {
next() // 正常放行
}
})
总结: next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转
2.0 全局后置守卫
路由跳转后, 触发的函数
语法:router.afterEach((to, from) => {})
router.afterEach((to, from) => {
console.log(to);
console.log(from);
console.log("路由发生了跳转");
})
3.0路由模式设置
修改路由在地址栏的模式
路由的两种模式: hash模式 history模式
配置history模式:
const router = new VueRouter({
routes,
mode: "history" // 打包上线后需要后台支持
})
history和hash模式对比：
-
它们都实现页面的跳转功能一样（跳转页面）
-
它们的区别体现在3个方面
- 外观：history模式的path路径不带#号，hash有#号
- 原理：hash模式使用onhashchange , history使用pushState。导致有兼容性的差异。hash模式兼容性好（对浏览器的兼容性，onhashchange ），history的兼容性比hash模式差一些 (底层使用的API是Html5的API： ，对浏览器有一定的要求。 )
- 项目上线之后有区别。history开发的项目，在打包上线之后，需要后端配置来支持，不然就会出现404页面。官网上有介绍。
-
我在开发中，没有特殊的要求，一般就用hash。如果要修改模式，就改mode: "history"
-
为啥会有404页面？
- history访问这个地址时， www.xxx.com/find ，后端收到的 req.url 是 /find， 但是我们是单页应用程序，我们只有一个资源是index.html，没有资源叫/find，所有就会报404。
- history访问这个地址时， www.xxx.com/#/find ，后端收到的 req.url 是 /， 有一个资源是index.html，能正常显示
