Vue Router activated deactivated 路由守卫

这篇具有很好参考价值的文章主要介绍了Vue Router activated deactivated 路由守卫。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

6.12.activated deactivated

activateddeactivated是路由组件所独有的两个钩子,用于捕获路由组件的激活状态具体使用

  1. activated路由组件被激活时触发
  2. deactivated路由组件失活时触发

Vue Router activated deactivated 路由守卫

src/pages/News.vue

<template>
    <ul>
        <li :style="{opacity}">欢迎学习vue</li>
        <li>news001 <input type="text"></li></li>
        <li>news002 <input type="text"></li></li>
        <li>news003 <input type="text"></li></li>
    </ul>
</template>

<script>
    export default {
        name: "News",
        data(){
            return {
                opacity:1
            }
        },
        activated() {
            console.log('News组件被激活了');
            this.timer = setInterval(() => {
                this.opacity -= 0.01;
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        deactivated() {
            console.log('News组件失活了');
            clearInterval(this.timer)
        }
    }
</script>

6.13.路由守卫

作用:对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫 全局守卫

  1. 全局守卫
    1. meta路由源信息
      // 全局前置守卫:初始化时、每次路由切换前执行
      router.beforeEach((to,from,next) => {
        console.log('beforeEach',to,from);
        if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
          if(localStorage.getItem('school') === 'atguigu'){ // 权限控制的具体规则
            next(); // 放行
          } else { 
            alert('暂无权限查看');
          }
        } else { 
          next(); // 放行 
        }
      })
      
      // 全局后置守卫:初始化时、每次路由切换后执行
      router.afterEach((to,from) => {
        console.log('afterEach',to,from);
        if(to.meta.title) { 
          document.title = to.meta.title;//修改网页的title 
          } else { 
            document.title = 'vue_test' ;
          }
      })
      
  2. 独享守卫
    beforeEnter(to,from,next){
      console.log('beforeEnter',to,from);
      if(localStorage.getItem('school') === 'atguigu') { 
        next();
      } else { 
        alert('暂无权限查看');
      }
    })
    
  3. 组件内守卫
    //进入守卫:通过路由规则,进入该组件时被调用 
    beforeRouteEnter (to, from, next) {... next()},
    
    //离开守卫:通过路由规则,离开该组件时被调用 
    beforeRouteLeave (to, from, next) {... next()},
    

6.13.1.全局路由守卫

src/router/index.js

import VueRouter from 'vue-router';

// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detail from '../pages/Detail';

// 创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children: [
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children: [
                        {
                            name:'Detail', // name配置项为路由命名
                            path:'detail', // 使用占位符声明接收params参数
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
                            props($route){ // 这里可以使用解构赋值
                                return {
                                    id: $route.params.id,
                                    title: $route.params.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

// 全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {
    console.log('前置路由守卫',to,from);
    if(to.meta.isAuth){
        if(localStorage.getItem('school')==='atguigu'){
            next();
        } else{
            alert('学校名不对,无权限查看!');
        }
    } else {
        next();
    }
});

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from) => {
    console.log('后置路由守卫',to,from);
    document.title = to.meta.title || '硅谷系统';
});


export  default router;

6.13.2.独享路由守卫

src/router/index.js

import VueRouter from 'vue-router';

// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detail from '../pages/Detail';

// 创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children: [
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'},
                    // 🔴独享守卫,特定路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('前置路由守卫',to,from);
                        if(to.meta.isAuth){
                            if(localStorage.getItem('school')==='atguigu'){
                                next();
                            } else{
                                alert('学校名不对,无权限查看!');
                            }
                        } else {
                            next();
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children: [
                        {
                            name:'Detail', // name配置项为路由命名
                            path:'detail', // 使用占位符声明接收params参数
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
                            props($route){ // 这里可以使用解构赋值
                                return {
                                    id: $route.params.id,
                                    title: $route.params.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

// 全局前置路由守卫————初始化的时候、每次路由切换之前被调用
// router.beforeEach((to,from,next) => {
//     console.log('前置路由守卫',to,from);
//     if(to.meta.isAuth){
//         if(localStorage.getItem('school')==='atguigu'){
//             next();
//         } else{
//             alert('学校名不对,无权限查看!');
//         }
//     } else {
//         next();
//     }
// });

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
// router.afterEach((to,from) => {
//     console.log('后置路由守卫',to,from);
//     document.title = to.meta.title || '硅谷系统';
// });


export  default router;

6.13.3.组件内路由守卫

src/pages/About.vue文章来源地址https://www.toymoban.com/news/detail-515674.html

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default {
        name: "About",
        // 通过路由规则,进入该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter', to, from);
            if(localStorage.getItem('school') === 'atguigu') {
                next();
            } else {
                alert('学校名不对,无权限查看!');
            }
        },
        // 通过路由规则,离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave', to, from) ;
            next();
        }
    }
</script>

6.14.路由器的两种工作模式

  1. 对于一个url来说,什么是hash值? #及其后面的内容就是hash值
  2. hash值不会包含在HTTP请求中,即:hash值不会带给服务器
  3. hash模式
    1. 地址中永远带着#号,不美观
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
    3. 兼容性较好
  4. history模式
    1. 地址干净,美观
    2. 兼容性和hash模式相比略差
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
const router = new VueRouter({ 
  mode:'history', 
  routes:[...] 
})

export default router;

到了这里,关于Vue Router activated deactivated 路由守卫的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中的activated和deactivated

    当页面被keep-alive缓存下来的时候,vue提供两个钩子函数 activated 被 keep-alive 缓存的组件激活时调用。 deactivated 被 keep-alive 缓存的组件失活时调用。 当keepalive页面缓存,有activated钩子和created钩子函数时 这两个函数会被同时触发,此时应该使用activated代替created,因为created只会

    2024年02月12日
    浏览(76)
  • 路由前置守卫router.beforeEach相关用法

    router.beforeEach 是 Vue Router 提供的全局前置守卫,用于在路由切换之前执行一些逻辑。该守卫接收三个参数: to : 即将要进入的目标路由对象。 from : 当前导航正要离开的路由。 next : 一个函数,用于 resolve 钩子。调用 next 表示路由可以继续执行。 基本用法如下: 在 beforeEach 钩

    2024年01月21日
    浏览(49)
  • Vue 路由 路由守卫

    路由守卫 正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说,就是在路由跳转 时候的一些钩子,当从一个页面跳转到另一个页面时,可以在跳转前、中、后做一些事情。 当你打开一个页面的前后需要去干什么。 每个守卫方法接收参数:

    2024年02月14日
    浏览(51)
  • Vue Router active-class 属性

    active-class 是 vue-router 模块的  router-link  组件的属性,当  router-link  标签被点击时将会应用这个样式。 单独在  router-link  标签上使用  active-class  属性 最后,为您选中的链接设置样式: 点击后,无论怎么刷新页面,样式效果都不会去掉,除非跳转到其他页面。。(这一

    2024年02月11日
    浏览(33)
  • vue - 路由守卫

    Vue路由守卫是一种机制,用于在导航过程中对路由进行监控和控制。Vue Router提供了三种类型的路由守卫: 1. 全局前置守卫:router.beforeEach 2. 全局解析守卫:router.beforeResolve 3. 全局后置守卫:router.afterEach 这些守卫可以用来进行权限验证、页面加载前的处理、页面切换时的

    2024年04月25日
    浏览(38)
  • 解密!Vue路由守卫的使用

    什么是路由 对路由这个概念,可能有些人并不很理解,但是路由器大家应该都不陌生。我们可以先来了解一下路由器是什么。路由器现在基本上家家都会有,大家是否好奇过它名字的来源?其实搞懂了路由器名字的来历,我们就可以搞懂什么是路由了,如下图: 上面两张图分

    2024年02月11日
    浏览(41)
  • vue三种路由守卫详解

    查看本专栏目录 关于作者 还是大剑师兰特 :曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。 热门推荐 内容链接

    2024年02月20日
    浏览(39)
  • React/Vue实现路由鉴权/导航守卫/路由拦截

    1、实现思路 自己封装  AuthRoute  路由鉴权高阶组件,实现未登录拦截,并跳转到登录页面 思路为:判断本地是否有token,如果有,就返回子组件,否则就重定向到登录Login 2、实现步骤 在 components 目录中,创建 AuthRoute/index.js 文件 判断是否登录 登录时,直接渲染相应页面组

    2024年02月15日
    浏览(41)
  • 编程式导航、缓存路由组件、路由守卫、Vue UI组件库【VUE】

    作用:不借助 router-link 实现路由跳转,让路由跳转更加灵活 具体编码: 作用:让不展示的路由组件保持挂载,不被销毁 具体编码: 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: (1)activated路由组件被激活时触发 (2)deactivated路由组件失

    2024年02月03日
    浏览(53)
  • Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!

    目录 vue3导航守卫讲解与使用 element-ui的安装与使用 配置路由和设置路径别名

    2024年02月05日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包