Vue路由——路由嵌套和前置守卫

本文主要是介绍Vue路由——路由嵌套和前置守卫，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

路由嵌套

main.js– 继续配置2级路由

一级路由path从/开始定义

二级路由往后path直接写名字, 无需 / 开头

嵌套路由在上级路由的children数组里编写路由信息对象

onst routes = [// ...省略其他{path: "/find",name: "Find",component: Find,children: [{path: "componentOne",component: ComponentOne},{path: "componentOne",component: ComponentOne},{path: "componentOne",component: ComponentOne}]}// ...省略其他
]

声明导航router-link自带2个类名：

• router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
• router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

可以给这2个类名设置css样式来完成点击高亮效果

前置守卫

作用：路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转
用法：在路由对象上使用固定方法beforeEach

const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {if (to.path === "/my" && isLogin === false) {alert("请登录")next(false) // 阻止路由跳转} else {next() // 正常放行}
})

to 是目标
from 是来源
next() 放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转

next()中可以放路径、配置对象、布尔值，如果不调用next()页面则一直停留在原地

这篇关于Vue路由——路由嵌套和前置守卫的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---