Vue vue-router 学习（4）

最新推荐文章于 2024-08-14 18:44:30 发布

每天吃肉肉

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量175

点赞数

文章标签： vue.js 学习 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_39098810/article/details/129494949

版权

进阶知识

首先是对之前的项目进行了一些修改，源码可在git中找到，增加了登陆页面

https://gitee.com/zhengwanting/studyVue2

导航守卫写在了permission.js中

一、导航守卫

1.全局前置守卫

router.beforeEach((to,from,next)=>{})：是在路由跳转之前，根据状态进行一些操作。

有三个参数分别是to,from,next。

to：即将进入的目标路由

from：即将离开的路由

next（可选）：路由控制参数

例：在路由跳转的时候，判断是否带有token（在登陆成功时，获取到的信息，用来判断用户身份的信息），若没有就返回登录页，若有就直接跳转。

这是一个较为简单的应用实际操作会添加更多判断条件。

也可以返回false，这样就会返回from的路由路径

import router  from "./router/router";
router.beforeEach((to,from,next)=>{
  // console.log(to) 即将进入的路由
  // console.log(from)  即将离开的路由
  if(localStorage.getItem('loginToken')){
    next()
  }else{
    // 因为没有检查到token值返回至登录页
    next({path: '/login'})
  }
})

2.全局解析守卫

router.beforeResolve确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

其实这里暂时没有很理解。之前也没有遇到过。

3.全局后置钩子

router.afterEach 与前置守卫不同的是，他没有next函数，也不会改变导航本身

它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

router.afterEach((to,from)=>{
  console.log(to)
  console.log(from)
  // 判断是否在router.js文件中访问的路由是否配置了name这个属性
  // 如果name属性存在就设置为浏览器标题名称
  // 不存在就设置为自定义值
  if(to.name) {
    document.title = to.name;
  }else{
    document.title = "xxx系统"
  }
})

4.路由独享守卫

beforeEnter,这个是在路由配置的时候添加的，通过名称理解就是这个路由，单独享有的守卫。

只有在进入路由的时候触发，不会在参数改变时触发。只有是不同的路由进入到这个路由的时候才会触发。

例如在page1页面中增加一个切换参数但是跳转page1的router-link

view1/index.vue文件
<template>
  <div class="content">
    页面1
    <div>通过this.$route.params.ids获取的参数： {{ userIds }}</div>
    <div>通过在routes中设置props:true获取的参数: {{ ids }}</div>
    <router-link :to="{ name: 'page1', params: { ids: '1111' } }"
      >切换ids</router-link
    >
  </div>
</template>

在router增加路由独享守卫

 {
          //记录的路径。应该以 / 开头，除非该记录是另一条记录的子记录。
          path: "/view1/:ids",
          name: "page1",
          // 这样就可以在页面使用props:['参数名']来访问到对应参数
          props: true,
          // 引入的组件名
          component: View1,
          meta: {
            requireAuth: true
          },
          beforeEnter:(to,from,next)=>{
            console.log(to)
            console.log(from)
            next()
          }
        },

可以发现只有在切换页面的时候（page2页面切换至page1页面时）会在控制台打印出信息，而在page1页面点击切换ids时不会在控制台打印出信息