首页 > 其他分享 >前置路由守卫vue

前置路由守卫vue

时间:2022-10-09 16:46:35浏览次数:33  
标签:code 前置 next vue 放行 query 路由

router.beforeEach((to, from, next) => {
  if (!to.query.code) {
    next({
      path: to.path,
      query: { code: "hm" },
    });
  } else {
    next();
  }
});

前置路由 一般使用router.beforeEach

有三个参数

to:去哪个页面;from:从哪个页面来 ;next: 放行函数 next():放行 , next(false):不放行

我这里的例子是写死的状态

标签:code,前置,next,vue,放行,query,路由
From: https://www.cnblogs.com/zongkm/p/16772663.html

相关文章

  • 【面试题】当面试官让我回答React和Vue框架的区别......
    Vue和React作为当前前端两大火热的框架,面试的时候自然不少被提及:请说一下你对react/vue框架的理解请对比一下两大框架的优缺点其实react和vue大体上是相同的,比如都使用虚......
  • vue中执行异步函数async和await的用法
    在开发中,可能会遇到两个或多个函数异步执行的情况,对于Vue中函数的异步函数执行做了一个小总结,如下:异步执行使用async和await完成created(){this.init()},metho......
  • 详解vue-element-admin之模块化Vuex
    最近项目要储备vue-element-admin,于是吧官方的demo拿来研究了一段时间~在这段期间内完成了一个自制的小项目,近期会上线(vue-element-admin后台+uniapp制作的小程序),请期待~......
  • Vue最佳实践和实用技巧
    1.props限制和透传​​​​内自定义限制props:{size:{//自定义验证函数validator:(val)=>{return["small","medium","large"].in......
  • elementUI/jquery/bootstrap/vue的异同
    elementUI的学习链接:https://blog.csdn.net/qq_40132294/article/details/124829639vue的学习链接:https://blog.csdn.net/weixin_48841931/article/details/126219434ht......
  • vue devtools使用指南
    1.安装(1)在github上下载devtools源码,地址:https://github.com/vuejs/vue-devtools(2)下载后进入vue-devtools工程,执行npminstall,然后npmrunbuild。(3)编译完成后修改pack......
  • vuex中两个用法
    在vuex中可以使用辅助函数和this.$store.state.xxxx两个用法vue3用的vuex为4版本,vue2用的vuex则为vuex的3版本因为在vuex中,vue开发者工具监听的是mutations的事件改值,mut......
  • vue-5 条件渲染/ 列表渲染
    <template> <div>  <h1style="background-color:yellowgreen;width:auto;">--------v-if--------</h1>  条件:type==  <selectv-model="type"> ......
  • vue-4 CSS绑定/Style绑定
    <template><div><divclass="border-style"><h1:class="class3">-----------------CSS绑定-------------------</h1><div:class="{'c1':clEnable......
  • vue个人学习笔记
    工程简介vue学习笔记1.what:基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。2.why为什么要选择vue呢?vue作为......