嵌套路由
补充上一节知识点:js跳转路由传参和标签传参,路由相同而参数不同时页面不做刷新的问题
解决方案:<router-view :key="$route.fullPath"></router-view>
路由守卫
const router = new VueRouter({
... }
//前置的钩子函数 最后要执行next()才会跳转
router.beforeEach((to, from, next) => {
// ...
})
//后置的钩子函数 已经跳转了不需要next
router.afterEach((to, from) => {
// ...
})
主要是简单介绍一下,路由守卫主要用于检验是否登录了,没登录就跳转到登录页面不让他在其他页面停留,但是现在这种处理主要的都用请求的全局拦截来做了。大致了解一下路由守卫即可
代码测试如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套路由</title>
</head>