学习JS,TS,Vue等等语言做一个信息分享的小平台

vue中 router.beforeEach() 的用法

PHPer 2022-10-25 257 0 0

vue中 router.beforeEach() 的用法

导航守卫 主要是通过跳转或取消得方式守卫导航

在前端路由跳转中,路由跳转前都是会经过beforeEach,而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。常见的使用场景有:1、验证用户是否登录(若未登录,且当前非登录页面,则自动重定向登录页面);2、用户权限;3、用户输入的路路径是否存在,不存在的情况下如何处理,重定向到哪个页面。此处呢我使用一个简单的例子:当用户输入的路径不存在的情况下,将其重定向到‘/’路径来说明beforeEach是如何控制路由的。话不多说,直接看下边如何实现的(这里我以创建一个名为router-be的项目为例)。

第一步 : 规定进入路由是否需要权限

@/router/index.js

import A from @/components/a
{
path : /a,
name : a,
component : A,
meta : { // 加一个自定义obj
requireAuth : true // 参数 true 代表需要登陆才能进入 A
}
}

第二步 : 使用vuex 整一个useid

@/assets/store.js

//使用vuex三步走
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
//这个理论来说
const store = new Vuex.Store({
state:{
userId :
}
})

export default store

第三步 : 使用router.beforeEach()

@main.js

思路:【
如果(进入这个路由需要权限){

如果(能获取到这个用户的userID){
就让这个用户进入这个路由
}否则{
就让这个用户进入b这个页面
}

} 即将进入的路由不需要权限就能进入 {

就让这个用户进入这个路由

}

对应代码:
import store from @/assets/store //把这个userId获取过来
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({path:/b})
}
}else{
next()
}
})

实现原理

constrouter=newVueRouter({…}) router.beforeEach((to,from,next)=>{// …}) 每个守卫方法接受三个参数 : to => route : 即将进入的目标路由对象 from => route : 当前导航正要离开的路由 next => function: 一定要调用该方法来 resolve这个钩子,执行效果以来 next 方法的调用参数...

立即注册
分享的网址网站均收集自搜索引擎以及互联网,非查问网运营,查问网并没有提供其服务,请勿利用其做侵权以及违规行为。
更新于:2022-10-25 02:05:56
    您需要登录后才可以评论。 立即注册
    相关内容

    vue框架大概要学多久(前端vue要学5天就会方法)

    带你玩转vue——开发工具的选择vscode

    VS Code——Live Server的简介、安装与使用

    fatal: unable to access ‘https://github.com/nhn/raphael.git/‘: Op...

    fatal: unable to connect to gitee.com: gitee.com[0: 180.97.125.228]: e...

    git提交或克隆报错fatal: unable to access ‘https://github.com/tata20191...

    Docker Desktop requires Windows 10 Pro/Enterprise/Home (18363+)

    vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicate...

    express + vue +mysql 搭建项目

    Vue + NodeJS + MySQL 搭建文章后台管理系统

    vue中在.vue文件中定义全局变量 全局函数及使用

    Identifier * is not in camel case - 代码规范性问题

    实战案例丨Vscode开发第一个Vue+Element Plus示例

    学习JS,TS,Vue等等语言做一个信息分享的小平台

    什么是 JWT -- JSON WEB TOKEN

    vue中 router.beforeEach() 的用法

    <router-view v-if=“isRouterAlive“> 刷新当前页面 - Vue2

    createError.js?2d83:16 Uncaught (in promise) Error: Request failed wi...

    vue axios跨域 Request Method: OPTIONS问题

    Vue报错 Errors compiling template: ****** : Interpolation inside attr...

    图片上传402 (Payment Required) 看具体js是这行xhr.send(formData); 报错

    这个符号`是怎么打出来的

    this.$router.push跳转时页面不刷新的问题

    vue 刷新当前页面或者跳转页面时候刷新

    vue项目如何刷新当前页面

    让 vue项目在Linux后台持久运行 npm run dev

    vue+element-ui表格列元素添加链接

    sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT

    js快速将字符串数组转化为数字数组(互换)

    Vue中checkbox的v-model初值设置为数组才对

    vue element 中使用a标签报错的问题

    Vue 中使用 router-link 后,URL 变化但是页面不刷新,Vue获取后台传过来的值

    vue:报错“Extra semicolon“解决

    vue中的各种报错整理

    vscode 运行 vue localhost 拒绝了我们的连接请求。使用visual Studio Code...

    推荐内容

    分享几个好用的bt搜索bt资源下载网址网站

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享

    全网最新bt磁力搜索引擎bt资源bt网站网址分享

    人气美女女优百度指数排行榜(波多野结衣,苍井空,三上悠亚,深田咏美,桥本有菜,北条...

    最强人造人深田咏美,业界的社交女王

    人生起起落落的三上悠亚,成名前的清纯风,怎么搭配出来的?

    业内第一大长腿,桥本有菜的腿究竟有多长

    波多野结衣,岛国业界著作最多的超级劳模

    日本AV界NO.1,苍井空是多少宅男的疯狂?

    美女女优视频混剪 This Girl-Laza Morgan

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩...

    sstap游戏代理教程 从此玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩虹六...

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享