vue第十三课嵌套路由与路由守卫

最新推荐文章于 2024-01-26 14:20:07 发布

qq_43538170

最新推荐文章于 2024-01-26 14:20:07 发布

阅读量119

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_43538170/article/details/112644600

版权

本文介绍了Vue中的嵌套路由概念，包括如何解决路由相同但参数不同页面不刷新的问题。此外，还简单探讨了路由守卫，它的主要作用是检查用户登录状态，未登录时自动跳转到登录页面，当前更多采用请求全局拦截实现此功能。

摘要由CSDN通过智能技术生成

嵌套路由

补充上一节知识点：js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题

解决方案：`<router-view :key="$route.fullPath"></router-view>`

代码思想

1:router-view的细分
- router-view第一层中，包含一个router-view
2:每一个坑挖好了，要对应单独的组件

路由配置

routes: [
           {
               path:'/nav',
               name:'nav',
               component:Nav,
               //路由嵌套增加此属性
               children:[
               //在这里配置嵌套的子路由
               ]
           }
       ]

案例
- 进入首页下面会有导航，个人中心、首页、资讯、我的之类的

路由守卫

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>